Pinia

前端项目工程依赖Pinia，一个拥有组合式 API 的 Vue 状态管理库。

什么是Store

一个 Store （如 Pinia）是一个实体，它持有未绑定到您的组件树的状态和业务逻辑。换句话说，它托管全局状态。它有点像一个始终存在并且每个人都可以读取和写入的组件。它有三个概念，state、getters 和 actions 并且可以安全地假设这些概念等同于组件中的“数据”、“计算”和“方法”。

文档

Pinia中文文档

安装

npm install pinia@2.1.6 

pinia使用

初始化

main.js

import { createPinia } from 'pinia'

...
const pinia = createPinia()
app.use(pinia)
...

创建

stores/index.js

import { defineStore } from 'pinia'

export const braveMainStore = defineStore({
    id: 'templateId',
    state: () => ({
        counter: 1,
    }),
    getters: {
        doubleCount: state => state.counter * 2
    },
    actions: {
        increment() {
            this.counter++
        },
        randomizeCounter() {
            this.counter += Math.round(100 * Math.random())
        },
    }
})

调用

import { braveMainStore } from '@stores'
const main = useMainStore()
console.log(main.counter)
console.log(main.doubleCount)
main.randomizeCounter()
console.log(main.counter)

缓存数据

依赖安装

npm install pinia-plugin-persistedstate@3.2.0

初始化

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

...
pinia.use(piniaPluginPersistedstate)
...

配置使用

export const braveMainStore = defineStore({
    persist: true,
})