Vuex最完整的模塊定義

const state = {
  token: 0,
  username: "",
};

const getters = {
  isLogin: (state, getter, rootState, rootGetter) => {  
    //其中rootState, rootGetter可以訪問命名空間之外的全局變量,順序不能變。
    return state.token == "1";
  },
};


const mutations = {
  UPDATE_TOKEN(state, payload) {
    state.token = payload;
  }
};


const actions = {
  update_warn_num(store,payload) {
    let {commit,dispatch,getters,rootGetters,rootState,state} = store; //通過解構獲得,順序無所謂,但名字不能變.
    
    commit("UPDATE_TOKEN", { a: 10 });                      //訪問本模塊的mutation, { a: 10 }爲payload
    
    commit("home/UPDATE_TEST", { a: 10 }, { root: true });    //訪問全局的mutation,home/UPDATE_TEST爲home模塊中的UPDATE_TEST mutation,  { a: 10 }爲payload

    dispatch("update_warn_num",{ a: 10 });                  //訪問本模塊的action, { a: 10 }爲payload
    
    dispatch("home/update_test", { a: 10 }, {root: true});    //訪問全局的action,home/update_test爲home模塊中的update_test action, { a: 10 }爲payload
  },
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

在項目中有時就會用到在一個命名模塊中 訪問/調用 另一個模塊的state,mutation,action等,所以把使用的普遍方法總結下來,以供需要者參考。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章