Vuex最完整的模塊定義

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

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

const getters = {
  isLogin: (state, getter, rootState, rootGetter) => {  
    //其中rootState, rootGetter可以訪問(wèn)命名空間之外的全局變量，順序不能變。
    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; //通過(guò)解構(gòu)獲得，順序無(wú)所謂，但名字不能變.
    
    commit("UPDATE_TOKEN", { a: 10 });                      //訪問(wèn)本模塊的mutation, { a: 10 }為payload
    
    commit("home/UPDATE_TEST", { a: 10 }, { root: true });    //訪問(wèn)全局的mutation，home/UPDATE_TEST為home模塊中的UPDATE_TEST mutation，  { a: 10 }為payload

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99208.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

30e8336b8229 2019-08-22 10:40 評(píng)論0 收藏0