Vuex使用单一状态树,用一个对象就包含了全部的应用层级状态,那么如何获取状态呢,最简单的方法就是在“计算属性”中返回某个状态
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}
每当store.state.count变化时,都会重新请求计算属性,并且出发相关dom更新。
下面是子组件中的用法,在根实例中注册store
Vue.use(Vuex)
new Vue({
store
})
下面在每个子组件中,使用this.$store.state.count就可以访问到
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
是不是很简单
mapState 辅助函数
当你的一个组件需要获取多个状态时,一个一个声明计算属性会有些重复和冗余,使用mapState,就会帮助我们自动生成,节省很多时间
import { mapState } from 'vuex'
export default {
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
//当计算属性名称和state子节点名称相同时,我们可以传一个字符串数组
computed: mapState([
'count1','count2'
])
//一般computed里还有其他计算属性,这是我们要混合使用的话,可以使用对象展开运算符
computed: {
localComputed () {....},
...mapState({ //或者这里改为数组
countAlias: 'count'
})
}
以上就是Vuex中 state数据的读取方法,通过this.store.state[key]获取我们想要的参数,同时在computed里返回就可以得到啦,同时还有一个mapState供我们在需要获取很多数据的时候使用,下一节,我们将介绍getter的用法~
引用
https://vuex.vuejs.org Vuex官方文档