0
点赞
收藏
分享

微信扫一扫

vue3中状态管理的使用(二)


mapState

当计算属性的名字和状态属性的名字相同时,我们可以直接给函数传递一个字符串数组就可以了。​​mapState()​​和​​mapMutations​​是一样的,都是返回一个对象,所以我们就可以使用展开运算符将它和组件内的计算属性结合一起使用。

computed: {
localComputed() {
...mapState({ xxx })
}
}

vuex中我们可以在store中去定义​​getters​​,这个属性的返回值和计算属性一样,会根据它的依赖项被缓存起来,只有当依赖项发生改变时才会重新进行计算。我们可以使用​​mapGetters​​这个属性函数将getter中的计算属性的访问形式进行简化。getter的传参还可以通过返回的一个函数去实现。


action

我们在定义mutation时,需要注意的是​​mutation()​​在处理函数中,不能使用异步调用,必须是同步函数。因为我们在进行调试的时候,不知道回调函数什么时候会被调用,回调函数中执行的状态改变也是不可被追踪的。action类似于mutation但是也有一些地方时不同的。第一个就是action提交的是mutation,而不是直接变更状态。第二个就是action可以进行任何异步操作,这也是两者最主要的区别。action的处理函数会接受一个和store实例具有相同的方法和属性的​​context​​对象。然后利用对象去调用​​commit()​​方法提交​​mutation​​,我们需要注意的是context对象不是store实例本身。​​contenx.dispatch()​​还可以调用其他的action方法,如果我们想要在action中多次调用commit的话,我们可以使用解构语法将代码最简化。action是通过​​store.dispatch()​​方法去触发。action还支持载荷和对象的形式进行分发。

store.dispatch('warTea', 7);
store.dispatch('agr', {
num: 6
})

组合多个action处理复杂的流程,​​store.dispatch()​​方法可以处理被触发的action的处理函数返回的​​Promise​​,并且这个方法返回的也是promise。这个方法还可以在不同模块中去触发多个action处理函数,我们只有当全部的函数处理完成后,返回的promise才会被执行。action还可以结合​​async​​和​​await​​一起使用。我们需要注意的是,我们在action中不会直接去修改状态,要想修改状态,我们需要提交mutation,然后去更改状态。

举报

相关推荐

0 条评论