vuex 的五个核心选项 State Getters Mutations Actions Modules

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']}

}