vue中vuex全家桶的使用封装

1.在项目下新建一个index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
var state = {
  //要设置的全局访问的state对象
  DoralerFormInfo: {}, //当前登录人的名字
  active:0,
  
};
//全局使用 this.$store.getters.xx （xx为getters里的值） 可获取当前最新的存储值
var getters = {
  //实时监听state值的变化
  DoralerFormInfo() {
    return state.DoralerFormInfo;
  },
  rues(){
    return state.active
  }
};
//全局使用 this.$store.commit(xx,传值)  (xx为mutations里的值,传值) 可传值修改state对应的值
//mutations为同步方法 只可在同步的事件中使用
var mutations = {
  set_DoralerFormInfo(state, obj) {
    state.DoralerFormInfo = obj;
  },
  set_Do1(state, active) {
    state.active = active;
  },
};
// 全局使用 this.$store.dispatch(xx,传值)  xx为actions里的值
//actions为异步方法
var actions = {
  change_DoralerFormInfo(context, obj) {
    context.commit("set_DoralerFormInfo", obj);
  }, 
  change_set_Do1(context, obj) {
    context.commit("set_Do1", obj);
  },
};
var store = new Vuex.Store({ state, getters, mutations, actions });

export default store;

2.在main.js中引用import store from "./store";（注：自己文件存在的绝对路径或相对路径）

在main.js中用实例调用Vue.prototype.$store = store;

3.在某个页面存值 this.$store.commit("set_Do1",要存的参数名),为同步

this.$store.dispatch(set_DoralerFormInfo,要存的参数名)为异步

4. 用this.$store.getters.rues取值