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取值