pinia---状态管理工具详解

pinia

前言

全局状态管理工具 Pinia.js 有如下特点：

• 完整的 ts 的支持；
• 足够轻量，压缩后的体积只有1kb左右;
• 去除 mutations，只有 state，getters，actions；
• actions 支持同步和异步；
• 代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的
• 无需手动添加 store，store 一旦创建便会自动添加；
• 支持Vue3 和 Vue2

安装

npm install pinia

在Vue3中引入

// main.ts

import {
    createApp } from 'vue'
import {
    createPinia } from 'pinia'

import App from './App.vue'

const app = createApp(App)

app.use(createPinia()).mount('#app')

初始化仓库

• 储存使用defineStore()来定义，第一个参数作为储存的名称

// stores/{name}.ts

import {
    defineStore } from 'pinia'

export const useNameStore = defineStore("name", () => {
   
    // 存放状态
	state: () => {
   
        return {
   
            id : 1,
        }
    },
    // 类似computed
    getters: {
   
        
    },
    // 异步操作，同步提交state
    action: {
   
        
    }
})

state

访问 state

默认情况下，您可以通过 store 实例访问状态来直接读取和写入状态：

const store = useStore()

store.counter++

重置状态

您可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值：

const store = useStore()

store.$reset()

改变状态

除了直接用 store.counter++ 修改 store，你还可以调用 $patch 方法。 它允许您使用部分“state”对象同时应用多个更改：

store.$patch({
   
  counter: store.counter + 1,
  name: 'Abalam',
})

但是，使用这种语法应用某些突变非常困难或代价高昂：任何集合修改（例如，从数组中推送、删除、拼接元素）都需要您创建一个新集合。 正因为如此，$patch 方法也接受一个函数来批量修改集合内部分对象的情况：

cartStore.$patch((state) => {
   
  state.items.push({
    name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

这里的主要区别是$patch() 允许您将批量更改的日志写入开发工具中的一个条目中。 注意两者，state 和 $patch() 的直接更改都出现在 devtools 中，并且可以进行 time travelled（在 Vue 3 中还没有）。

替换state

您可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态：

store.$state = {
    counter: 666, name: 'Paimon' }

您还可以通过更改 pinia 实例的 state 来替换应用程序的整个状态。 这在 SSR for hydration 期间使用。

pinia.state.value = {
   }

Getters

Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用：

export const useStore = defineStore('main', {
   
  state: () => (