手摸手教你在vue-cli里面使用vuex，以及vuex简介

npm install vuex --save

import Vue from 'vue';
import Vuex from 'vuex';
import status from './modules/status/index';//引进模块
Vue.use(Vuex);
export default new Vuex.Store({
  modules: {  
    //Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action
    dataStatus:status,//访问这里面数据的时候要使用'dataStatus'
  },
});

import actions from './actions';
import mutations from './mutations';
//引入action和mutations 
export default {  
  state:{ //这里面是要读取或者写入数据的地方
      msg:'默认状态',
  },
  //state actions mutations顺序不能乱
  actions: actions,
  mutations: mutations,
}

//这个js文件里面只是一些变量，把action和mutation文件里面相同变量名的链接起来
export const VUEX_TEST = 'VUEX_TEST';
// 一般使用的是大写来命名变量，因为尤大也是这么做 2333

import * as types from './mutation_type'; //引入变量
export default {
  actionFn({commit},data){ //actionFn是在组件通过dispatch触发的函数名 可以理解成组件和actions的连接
    commit(types.VUEX_TEST,data);
    //types.VUEX_TEST 是要commit到mutation的哪个位置 变量的作用
    //data 是传过来的参数
  }
};

import * as types from './mutation_type';//引入变量
export default {
  //types.VUEX_TEST 代表接受哪个actions的commit 也就是上面引入变量的作用
  [types.VUEX_TEST](state,data){ 
    //第一个参数state是这个模块的state 第二个参数是传进来的数据 
    if(data.status==1){ //根据传进来的参数做各种操作
      //这里就是操作state了，赋值之后，各个组件上面引用该数据的地方会自动更新      
      state.msg=data.text;
    }else if(data.status==2){
        state.msg='奕迅';
    }
    //这里是随便写的一个栗子
    console.log(state.mg,data,'mutation'); 
  }
};