Vuex最完整的模塊定義

gecko23 發(fā)布于2019-08-23 13:05 / 1781人閱讀

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; //通過解構(gòu)獲得，順序無所謂，但名字不能變.
    
    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
};

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

云服務(wù)器 GPU云服務(wù)器最完整 Vuex vuex cdn html的完整格式

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99208.html

相關(guān)文章

Vue2.5+ Typescript 引入全面指南 - Vuex篇

摘要：引入全面指南篇系列目錄引入全面指南引入全面指南篇前言正是我下決心引入的核心痛點。其中，可以通過建立輔助函數(shù)形式，簡單繞開。只是類型均為建議不使用，以明確指定類型及調(diào)用可通過上述下輔助函數(shù)，手動開啟類型推導(dǎo)及類型推導(dǎo)，暫時只能手動指定。 Vue2.5+ Typescript 引入全面指南 - Vuex篇系列目錄： Vue2.5+ Typescript 引入全面指南 Vue2.5+ T...

DataPipeline 2019-08-21 17:27 評論0 收藏0
Vuex? 和 TypeScript 的 Webpack4.+ 嘗鮮

摘要：靜態(tài)類型系統(tǒng)能幫助你有效防止許多潛在的運行時錯誤，而且隨著你的應(yīng)用日漸豐滿會更加顯著。選擇，會生成符合規(guī)范的文件，使用，會生成滿足規(guī)范的文件，使用會生成使用的的代碼。使用或者是會生產(chǎn)包含特性的代碼。 showImg(https://segmentfault.com/img/bVbbhsr?w=800&h=800); 靜態(tài)類型系統(tǒng)能幫助你有效防止許多潛在的運行時錯誤，而且隨著你的應(yīng)用日漸...

Astrian 2019-08-22 17:33 評論0 收藏0
詳解基于vue，vue-router, vuex以及addRoutes進行權(quán)限控制

摘要：基于的權(quán)限控制教程，完整代碼地址見接下來讓我們模擬一個普通用戶打開網(wǎng)站的過程，一步一步的走完整個流程。由于權(quán)限這塊邏輯還挺多，所以在添加了一個模塊來處理權(quán)限。基于vuex, vue-router,vuex的權(quán)限控制教程，完整代碼地址見 https://github.com/linrunzhen... 接下來讓我們模擬一個普通用戶打開網(wǎng)站的過程，一步一步的走完整個流程。首先從打開本...

eternalshallow 2019-08-26 11:53 評論0 收藏0
無痛學(xué)會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

摘要：它會檢測出最大靜態(tài)子樹就是不需要動態(tài)性的子樹并且從渲染函數(shù)中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術(shù)，這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

fish 2019-08-29 11:27 評論0 收藏0
無痛學(xué)會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

摘要：它會檢測出最大靜態(tài)子樹就是不需要動態(tài)性的子樹并且從渲染函數(shù)中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術(shù)，這篇文章主要介紹最近非?；鸬膙ue2前端框架的特點和vue2+vuex2+we...

30e8336b8229 2019-08-22 10:40 評論0 收藏0