Vuex的五个核心属性及辅助函数

vuex是什么?
vuex是一个专门为vue.js应用程序开发的状态管理模式,它采用了集中式存储和管理程序所有组件的状态
主要包括几个模块
state 存储所有的变量(state是一个对象)
mutations 直接操作state中的数据
actions 只能调用mutations中的方法
getters 类似于计算属性,可以实现对state做一些逻辑性的操作
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.KaTeX parse error: Expected 'EOF', got '}' at position 50: …ions(['tips']) }̲ mapAction meth…store.dispatch(‘tips’)传
…mapActions([‘tips’])
}

上一篇:vue无缝轮播滚动


下一篇:Vue原理「十八」-- computed和watch的区别及原理 ***