Vuex中的state访问状态对象
2019-12-27 本文已影响0人
凤箫之舞
state ,这个就是我们说的访问状态对象,它就是我们SPA(单页应用程序)中的共享值。
如何把状态对象赋值给内部对象,也就是把stroe.js中的值,赋值给我们模板里data中的值。
我们有三种赋值方式。
一、通过computed的计算属性直接赋值
computed属性可以在输出前,对data中的值进行改变,我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。
例如:实现顶栏标题文字改变。
computed:{
count: function () {
return this.$store.state.count
}
}
注意:return this.store的。
这种写法很好理解,但是写起来是比较麻烦的,那我们来看看第二种写法。
二、通过mapState的对象来赋值
1.首先要用import引入mapState
import {mapState} from 'vuex'
2.还在computed计算属性里写如下代码:
computed:mapState({
count:state=>state.count
})
// computed: mapState({
// // ①ES5写法
// // count: function (state) {
// // return state.count
// // }
// // ②ES6写法(箭头函数)
// count: state => state.count
// })
三、通过mapState的数组来赋值
1.首先要用import引入mapState
import {mapState} from 'vuex'
2.还在computed计算属性里写如下代码:
computed: mapState(['count'])
这个算是最简单的写法了,在实际项目开发当中也经常这样使用。
uni-app中这么用:
1.import
import {
mapState
} from 'vuex';
computed: {
...mapState(['hasLogin'])
},