我们已经把vuex的结构给建起来了,那么我们怎么在各个组件中使用vuex的状态呢?那就是通过state。
我们都知道state是vuex的数据中心,那么我们页面可以直接使用,不管是标签还是js里面都可以这样使用:
this.$store.state.test
然后官网推荐从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态:
computed: { test () { return this.$store.state.test }}
然后就可以直接使用this.test了。
如果数据有点多,这样的计算属性书写会有点冗余,vuex提供了mapState辅助函数生成计算属性。
数组:
computed: mapState(['test','mapState'])
对象:
computed: mapState({ test: state => state.test, mapState: state => state.mapState,})
跟本地计算属性混合使用;
computed: {
localComputed(){
return '这是局部计算属性'
},
...mapState(['test', 'mapState']),
...mapState(
{
test1: state = > state.test + 'test1',
mapState1:state =>state.mapState + 'mapState1'
}
)
}
复制代码
上面的几个方法不管是在标签还是js里面都可以直接通过this.调用相对应的数据。
还有一个最简单,但是不推荐使用的方法,直接赋值修改:
this.$store.state.test = '直接修改'
欢迎关注Coding个人笔记 公众号