Vue中Pinia简介

Pinia是一个进行vue状态管理的组件，他会创建一个带有state、actions、getters的option对象

const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    double: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

• state：可以认为是store的数据
• getters：是store的计算属性
• actions：是store中使用的方法
  还有一种是setup箭头函数的方式来定义一个store的

const useCounterStore = defineStore('count', () => {
  const count = ref(0);
  function increment(){
    count.value++
  }
  // 通过返回的方式暴露属性和方法
  return {count, increment}
})

在调用useStore()之前store的实例不会被创建，并且store是一个用reactive包装的对象，所以不需要在使用的时候在后面添加value
创建store之后可以直接通过store对象调用其中的方法和属性，不需要使用value

const counter = useCounterStore();
counter.increment();

对state的操作

• $reset()方法： 重置state，会创建一个新的状态对象并替换他当前的状态；在setup函数中用户需要自己来重写$reset()方法；
• $patch()方法允许用一个state的补丁对象在同一时间更改多个属性；使用$patch不能完全替换掉store中的state，因为那样会破坏他的响应性；

store.$patch(() => {
  state.hasChanged = true;
  state.item.push({new item})
})

注意：可以使用pinia.state.value = {}来设置整个应用的初始state

• $subscribe()：侦听state及其变化，他的好处是比起watch()他只在$patch后触发一次；

getter

getter只是计算属性，不能向他传递参数，但是有一种方法就是让getter直接返回一个函数，这样可以在返回的函数中传入参数获得动态的返回值；
不过如果getter返回的是函数那么将不再被缓存，其返回结果将根据传入的参数而动态改变；

action

• 通过store.$onAction()可以监听action和他的结果，传递给他的回调函数会在action本身之前执行；
• action中可以使用异步函数
• action中可以使用其他的store来获取其他的参数

pinia的扩展

使用插件可以对pinia进行扩展，例如添加一个持久化的插件，让管理登录的pinia的store数据在修改之后在本地进行持久化