什么是vuex？怎样使用？

什么是Vuex？

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

引入Vuex（前提是已经用Vue脚手架工具构建好项目）

利用npm包管理工具，进行安装 vuex。

npm install vuex --save

新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex，并使用

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

在main.js 中引入新建的 vuex 文件，并在实例化 Vue 对象时加入 store 对象

   import store from './store/store_index'
   new Vue({
     el: '#app',
     router,
     store,//使用store
     template: '',
     components: { App }
   })

目录结构

store
|____modules 每个模块一个文件
| |____first.js
|____mutation-types.js
|____store_index.js

store_index.js 文件代码示例

  import Vue from 'vue';
  import Vuex from 'vuex';
  import first from './modules/first'; // 引入模块文件
  Vue.use(Vuex); 
  export default new Vuex.Store({
    modules: { // 注册模块
      firstModule: first
    }
  });

mutation-types.js 文件代码示例

  export const FIRST = { // 定义常量，一个模块一个常量
    GET_DATA: 'getData', // 最好都大写
    ADD_DATA: 'addData',
    INIT_DATA: 'initData'
  }  

list.js 文件代码示例

 import {FIRST} from '../mutation_type'; // 引入常量

  export default {
      state: { // state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。
      list: [],
      msg: '我是第一个信息'
      },
      mutations: { // 更改state里的数据 只能是同步操作
        [FIRST.GET_DATA](state,data){
            state.list = data;
        },
        [FIRST.ADD_DATA](state,data){
            state.list.push(data);
            console.log(state.list)
        },
        [FIRST.INIT_DATA](state,data){
            console.log("initData");
            state.list=data;
        }
      },
      getters: { // 获取数据并进行二次处理
          getList: function (state) {
              return state.list;
          }
      },
      actions: { // 异步操作在这里
          //设置延时
          initD:function(context,value){
              setTimeout(function(){
                  var initD = ['初始化值1','初始化值2']; // 模拟从后台获取数据
                  //提交事件
                  context.commit('initData',initD); // 提交到mutations，让他改变数据
              },1000)

          }
      }
  }

vuex 数据的流向

获取状态, 在计算属性 computed 中获取

computed:{
    msgOne(){
        return this.$store.state.firstModule.msg; // 模块化store后，获取状态要加上模块名
    },
    list(){
        return this.$store.getters.getList; // 获取getters处理过的数据
    }
}

改变状态

 this.$store.commit('loginOut',data);

this.$store.dispatch('getUserInfo',this.token);
let redirect = decodeURIComponent(this.$route.query.redirect || '/'); // 得到进入登录页面的地址
     this.$router.push({ // 登录成功后，返回进入登录的页面
          path: redirect
      })

context 与 dispatch:

context：context是与 store 实例具有相同方法和属性的对象。可以通过context.state和context.getters来获取 state 和 getters。 dispatch：翻译为‘派发、派遣’的意思，触发事件时，dispatch就会通知actions（跟commit一样一样的）参数跟commit也是一样的。

补充1

更改state的数据并显示在组件中，有几个步骤：
在mutations选项里，注册函数里面装逻辑代码。 在组件里，this.$store.commit(‘change’,payload) 注意：提交的函数名要一一对应 。 触发函数，state就会相应更改。 在组件的计算属性里 this.$store.state 获取你想要得到的数据。

补充2

各个类型的 API各司其职，mutation 只管存，你给我（dispatch）我就存；action只管中间处理，处理完我就给你，你怎么存我不管；Getter 我只管取，我不改的。　 action放在了 methods 里面，说明我们应该把它当成函数来用（讲道理，钩子函数也应该可以的） mutation是写在store里面的，这说明，它就是个半成品，中间量，我们不应该在外面去操作它。 getter写在了 computed 里面，这说明虽然 getter我们写的是函数，但是我们应该把它当成计算属性来用。

补充3

state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。 mutations：前面讲到的都是如何获取state的数据，那如何把数据存储到state中呢？在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。　　mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东东作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象（其实这个东西跟git的commit很类似）还有一点需要注意：mutations方法必须是同步方法！ actions：进行所有的异步操作，然后通过 context.commit() 方法提交到mutations，让他改变数据

actions和mutations的区别:

Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。 Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下