Vuex的五个核心属性及辅助函数
Vuex是什么??
VueX 是一个专门为 Vue.js 应用设计的状态管理架构
主要包括几个模块
state 保存全局状态的
getters 允许组件从state中获取数据,相当于计算属性
mutation store中唯一改变state中状态的方法,同步函数
actions 用于提交mutation 异步操作
modules 拆分多个模块的
辅助函数
mapState
引入
import { mapState } from 'vuex
3种方法
1.对象:
computed: mapState({
// 箭头函数
count: state => state.count,
// 这里为了能够使用this获取局部变量localCount,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
2.数组
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
3.对象展开运算符
computed: {
localComputed () {},
...mapState({})
}
mapGetters:mapGetters将store中的getter映射到局部计算属性
computed: {
...mapGetters([
'oneGetter',
'anotherGetter'
])
}
mapMutations
使用mapMutations辅助函数将组件中的methods映射为store.commit调用。
methods: {
// 通过 this.$store.commit('tips')
...mapMutations(['tips'])
}