Vuex的核心概念的应用（state，getters,mutation,action）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。个人理解Vuex有点类似我们h5里常用的localStorage 主要是用于存储项目开发时需要用到的一些公共数据，项目较小时推荐使用localStorage基本就够用了，当项目工程较大时，有较多需要扩展时建议使用Vuex,方便于我们的开发管理。接下来我们一步步仔细说明：

首先准备工作如下：

第一步：安装Vuex, 通过命令符工具，打开对应的vue工程，执行命令：

npm install vuex --save

 安装完成后如果出现了版本号的字样，基本上就是表示安装完成了，自己自信看一下命令行中的英文语句就明白了。

第二步：在vue工程的src目录下创建一个store目录并在store目录下创建一个index.js文件，接下来我们的重点开发就将会在这个index.js文件中完成。

第三步：在vue工程的核心文件main.js文件中引入刚刚创建的index.js文件,如下：

import store from './store';              //引入vuex文件


new Vue({
  el: '#app',
  router,
  store,     //引入store
  components: { App },
  template: '<App/>',
})

有人可能就要疑问了，为什我的引入路径是：'./store' 而不是 './store/index.js'  这里我说明一下，不需要指到index.js也可以，vue在路径识别是会默认识别到store下的index.js文件的。

 

准备工作完了那就开始开发了：

开发流程如下（核心概念：state，getters，mutations，actions）：

第一步：引入vue和vuex,并执行Vue.use(Vuex)，如下：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

有人可能会疑问为什么要执行Vue.use(Vuex)，因为Vuex作为一个插件本身其实是一个对象，所以当我们执行Vue.use(Vuex)时相当于在install(注册) vuex这个对象。这一步很关键必须执行。详细的请了解Vue.use（）

 

第二步：初始值定义（state）

首先定义一个state对象如下：

const state={
     parameter1: true,
     parameter2:0
};

设置的全局访问的state对象，所有的全局都可能用到的值都在这里进行定义，在所有的组件里你都可以通过 this.$store.state.parameter1的这种方式取出state中定义的值

 

第三步：监听（getters）

首先定义一个getters对象如下：

const getters = {   
    gettersFunction1(state) { 
       return state.parameter1
    },
    gettersFunction2(state){ 
       return state.parameter2
    }
};

在第二步中我们定义了state,但是我们不知道state中的值是否会变化，或者变化为多少了，此时我们就需要监听state的变化，vuex官方API提供了一个getters，和vue计算属性computed一样，来实时监听state值的变化，获取监听的结果我们可以通过：this.$store.getters.gettersFunction1或this.$store.getters.gettersFunction2这种形式来取。

对象getters中的方法名：gettersFunction1和gettersFunction2 是随意命名的主要是用来承载parameter1和parameter2的。

 

第四步：修改（mutation）

首先定义一个mutation对象如下：

const mutations = {
    mutationFunction1(state) {
        state.parameter1 = true;
    },
    mutationFunction2(state) { 
        state.parameter1 = false;
    },
    mutationFunction3(state,num){ 
        state.parameter2+ = num;
    }
};

想要更改 第二步中state 中的值，唯一方法是提交 mutation，当我们在其他外部组件需要执行mutation这个对象里的函数时：只需要这样：this.$store.commit("mutations对象内的函数名")或this.$store.commit('mutations对象内的函数名'，'要传入的参数')这样就可以全局改变改变state的值了

 

第五步：修改mutation中的函数（action）

首先定义一个action对象如下：

 const actions = {
    actionFunction1(context) {  
        context.commit('mutationFunction1');
    },
    actionFunction3(context) {  
        context.commit('mutationFunction2');
    },
    actionFunction3(context,num){  
        context.commit('mutationFunction3',num)
    }
};

Action 类似于 mutation，不同在于：

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

而在外部组件里进行全局执行actions里面方法的时候，你只需要用执行this.$store.dispatch('actions对象内的函数名')或this.$store.dispatch('actions对象内的函数名'，'要传入的参数')，这样就可以全局改变改变state的值了

 

第六步：定义一个新的 Vuex对象，并将上面第二步到第五步定义的全局对象，放入新的Vuex对象中。如下：

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
});

 

第七步：暴露vuex对象，方便全局使用：

export default store;  

至此，完整的state，getters,mutation,action一套应用就此结束了，实际的开发基本原理就是如此了，我们可以根据自己的实际需要做一些调整。

 

额外说明：当我们要避免Vuex变得异常臃肿时，为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，详细的请参考官网module