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数据在修改之后在本地进行持久化