在pinia中,对于mapState帮助器将状态的属性映射到选项式的组件实例上时,State的状态是只读的,我们可以在选项式的this上去尽情地调用状态,但是不能修改状态值:
例如:
mapState将number映射到组件实例上,
computed:{
...mapState(useStudentStore,[ "number"]),
}
当在函数里试图修改this.number时:
methods: {
changeNumber() {
this.number = 100; //直接修改number
},
......
}
会有报错提醒:number的数据属性是只读的
但是,pinia去掉了vuex中冗余的Mutations,支持直接修改State的状态。
在组合式的setup()函数中,StudentStore.number++是允许直接修改,不用commit提交给mutation。
那么,pinia在选项式API的环境下,State的状态是mapState映射进来,数据属性只读的,且pinia又没有mutation来修改,所以引入了mapWritableState,对状态进行直接修改。
引入时,
import {mapWritableState } from "pinia";
//在computed中映射State的状态:
computed: {
...mapWritableState(useStudentStore,["number"]), //这里是mapWritableState帮助器
}
直接进行修改,
methods: {
changeNumber() {
this.number = 999; //直接修改
console.log(this._pStores) //查看store
},
...
已经修改了State里的数据。看看store中的number:中间红色圆圈里
总结:
在选项式API的环境下,pinia可使用mapWritableState将State中的状态映射到组件实例上,直接修改状态的值。