1、安装 vuex 根目录下 store - index.js 文件 定义 这五个核心选项
2、总共三个组件 父组件 两个子组件 两个子组件分别 引入 父组件中
3、组件分别为:father 父组件、add 子组件、 sub 子组件
| State 存储一些基础数据
访问 State 的数据通过原型链方式 :
在 store index.js 文件 state 定义 num 基础数据
state: {
num: 0
}
在 add 子组件 模板
<div>{{$store.state.num}}</div> // 原型链访问
访问 state 的数据 通过 mapState 影射函数
模板:
<div>{{num}}</div>
import { mapState } from ‘vuex’ // 引入 mapState
computed: {
...mapState(['num']) // 将 mapState 方法 混入 计算属性
}
| Mutations 唯一修改 state 里 的数据
访问 mutations 原型链方式
在子组件 add 模板:
<div>{{ num }}</div>
<button @click="addHandle"></button>
在子组件 add 方法:
methods: {
addHandle( ){
this.$store.commit('add',3) // 通过 commit方法 触发 mutation 并携带参数
}
}
在store 。index.js 文件
mutations:{
add( state.step){
this.state.num += step;
}
}
访问 Mutations 通过 mapMutations 影射函数
import { mapMutations } from 'vuex'
methods: {
...mapMutation: {['sub']}
}