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