Vuex最完整的模塊定義

gecko23 發布于2019-08-23 13:05 / 1779人閱讀

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等，所以把使用的普遍方法總結下來，以供需要者參考。

云服務器 GPU云服務器最完整 Vuex vuex cdn html的完整格式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99208.html

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

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

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

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

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

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

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

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

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

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

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