Vuex之state

我们已经把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个人笔记 公众号