Vuex详解

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单的来说就是用于一个管理数据的仓库，对于每个vue的实例来说，它们各自的数据都维护在各自的data中。遇到多个vue实例使用相同的数据的时候，那么需要在每个实例中都维护一份数据，就会造成了内存的浪费。
这时候我们就需要使用状态机了，多个vue时候将共同的数据维护在状态机内，只存储一份数据。
在使用它的时候，首先我们需要安装状态机

1.安装

如果在html中使用，你需要通过标签导入，如CDN。
导入后通过new Vuex.Store();创建出的实例必须要注入到vue的实例当中去。
如果通过npm下载,先通过npm install -S vuex或者通过脚手架直接安装，
然后通过Vue.use()将状态机注入到vue的实例当中去。

2.核心概念

state 用于存放状态的,即数据
getters 用于获取状态，从现有数据获取到新的数据，相当于vue组件中的computed
mutations 突变 同步修改state中的值
actions 动作，支持异步操作，提交突变(通过mutations改变state)

3.用法

var store = new Vuex.Store({
        state:{
            // 状态机
            a:{}//初始化a为一个对象
        },
        getters:{
            newA(state){
                //对a进行处理返回,得到想要的值
                return state.a.filter();
            }
        },
        mutations:{
            // 同步函数
            //重置a
            resetA(state,a){
                state.a = a;
            }
        },
        actions:{
            // 异步函数
            findA(context,data){
            	//在执行findA的时候可以通过data传参
                // 进行异步操作，并且将返回的结果通过赋值给a
                //context是上下文的意思，和store一样，但又不是store，通过commit()进行提交突变，改变a的值
                context.commit('resetA',a);
            }
        }
    })
        

通过上面的代码实例化好一个状态机，并且维护一个数据a,那么我们怎么在vue的实例中使用呢？
当我们将状态机注入到vue中后，我们可以通过this.$store访问到状态机。那么我们就可以在vue的实例中获取到状态机中的变量和方法了。
通常我们将拿到的变量放到vue的计算属性中，方法放到methods中去。
对于a来说，

computed:{
            a(){
                return this.$store.state.a;
            }
        },

或者你可以通过getters拿到

computed:{
            newA(){
                return this.$store.getters.newA;
            }
        },

此时在vue实例所访问的this.a就是状态机中所维护的变量a

对于查找actions中的方法来说，我们可以通过

this.$store.dispatch('findA',data);

来执行

我们还可以通过状态机的辅助函数获取
使用这种方式就会非常简单
使用辅助函数的后会完全脱离对this.$store的操作

import { mapState } from 'vuex'

computed: {
	...mapState(["a"])
    // 映射 this.a 为 store.state.a    
}

首先将mapState这个方式从vuex中解构出来，再使用它，并将结果通过…剥离出来。
如果想要重命名变量

computed: {
	...mapState({b : "a"})   
	// 映射 this.b 为 store.state.a  
}

对于getters和actions和state类似，
通过mapGetters和mapActions这两个辅助函数实现。
不同的是mapActions写在方法中即methods。
通过this.方法名直接调用，而不是通过this.$store.dispatch进行调用。