包会！Vuex详解（State、Mutation、Action、Getter）

什么是Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
如果非要自己去理解就是将程序中的共享数据统一管理。
在我们的程序当中存在的共享数据，当我们更改共享数据发生错误时，我们很难去查找出是哪一个地方更改了数据。在此同时使用Vuex可使用调试工具（ devtools extension）检测到是哪一个组件修改了数据，形成快照！
我们知道Vue组件中的数据不是共享的，在一些共享数据我们使用信息传递比较麻烦，这是我们就可以放到vuex中进行管理，所有组件都可以使用！

1.Store

在我们使用Vuex之前我们需要先学会一个简单的store，每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，里面包含我们的大部分共享数据（state）。不理解不要紧，我们现在只需要知道如何使用即可。

1）搭建页面

在这里我搭建了一个很简单的应用，直接引入vue与vuex的js文件，如果使用的是脚手架搭建的模块化构建系统，按照Vue规定使用插件即可。

2）创建store

2.State

来解释下上面的store中的state，state中存放的就是我们全局共享的数据。
我们将count这一全局变量交给Vuex管理，每一个实例只有一个store，既然交给他管理，我们怎样在组件中何时何地的取出使用？

1）方式一：$store.state.count

我们直接在页面中使用模板语法将其显示出来

    

        总数：{{$store.state.count}}
    

运行结果：

如果我们在实例代码中使用需要加this–>this.$store.state.count

2)方式二：mapState辅助函数

在一种情形下，如果我们需要使用大量的共享数据，我们每一次使用都需要使用this.$store.state.xxx来获取数据，特别的冗余复杂，Vuex提供辅助函数我们可以将state中的共享数据映射到我们的computed函数中供我们直接使用。

    

        总数：{{count}}
        总数1：{{count1}}
    

运行结果：

从上代码中可以看出我们将state中的共享数据映射到该实例中的computed函数中，直接当作我们实例中的数据使用即可。
注：上面的三个点是对象展开运算符。可自行百度一下，这里来个小实例应该就明白了。

let { x, y, …z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }

3.Getter

getters相当于我们实例中的computed计算属性。这一句话我们应该就明白的差不多了。使用方法与state没有太大差距。

1）在store中加入getters类型与函数

const store = new Vuex.Store({
        state:{
            count:0
        },
        getters:{
            countNum(state){
            	//我们在总数后面加上一个字
                return state.count+'个'
            }
        }
    });

2）使用方法一：$store.getters.countNum

    

        总数：{{$store.getters.countNum}}
    

3）使用方法二：mapGetters辅助函数

这里与上面的mapState辅助函数使用方法一样

const vm = new Vue({
        el:'#app',
        store,
        computed:{
            ...Vuex.mapGetters(['countNum'])
        }
    })

直接使用即可：

    

        总数：{{countNum}}
    

4.Mutation

来做个小实例，效果如图：

我们第一反应是这还不简单，直接@click = "$store.state.count++"不就可以了嘛，我们这样做是不对的，的确可以实现，但是来看官方文档：

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

官方文档已经说的很明白了，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。那么来使用一下：

1）首先在Vuex的store中加入事件类型mutations与更改数据的函数（注：我们在mutations中的函数只能同步！！不能写异步函数，如果需要写异步函数，需要使用Action）

const store = new Vuex.Store({
        state:{
            count:0
        },
        //更改state中的数据只能通过mutations！
        mutations:{
        	//加1函数
            add(state){
                state.count++
            },
            //减2函数
            reduce(state,step){
                state.count-=step
            }
        }
    });

需要注意的是：上面函数中的第一个参数为state对象，固定，第二个参数为我们的额外参数

2）调用mutations中的函数

1. 无额外参数加1函数调用：$store.commit('add')
2. 有额外参数减2函数调用：$store.commit('reduce',2)

    

        总数：{{count}}
        +1
        -2
    

3）mapMutations辅助函数

看名字就知道我们也可以使用mapMutations将函数映射到实例的方法中。使用方法与上面的来个辅助函数差不多，不过我们需要放在实例的methods中：

const vm = new Vue({
        el:'#app',
        store,
        computed:{
            ...Vuex.mapState(['count'])，
            ...Vuex.mapGetter(['countNum'])
        },
        methods:{
            ...Vuex.mapMutations(['add','reduce'])
        }
    })

在使用时直接调用即可：

    

        总数：{{count}}
        +1
        -2
    

5.Action

Action 类似于 Mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

1）加入事件类型action与函数

const store = new Vuex.Store({
        state:{
            count:0
        },
        mutations:{
            add(state){
                state.count++
            },
            reduce(state,step){
                state.count-=step
            }
        },
        actions:{
           add(context){
               context.commit('add');
           },
           reduce(context,dept){
               context.commit('reduce',2);
           } 
        }
    });

上面代码我们可以看出更改state中的数据还是通过mutation来进行更改。

2）调用action中的函数

1. 无额外参数加1函数调用：$store.dispatch('add')
2. 有额外参数减2函数调用：$store.dispatch('reduce',2)

    

        总数：{{count}}
        +1
        -2
    

3）mapActions辅助函数

这个就不说了，与上面的mapMutations使用方法一样。

Vuex还有许多其他使用的小技巧，大家可以进入官网查看学习一下。祝大家天天开心！