了解vuex核心概念請移步 https://vuex.vuejs.org/zh/

一、初始vuex

1.1 vuex是什么

那么先來看看這兩個問題:

什么是vuex?官網說：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。 按個人通俗理解來說就是：vuex就是用來管理各個組件之間的一些狀態，可以理解為這些狀態就是公共(共享)部分。此時任何組件都能從中獲取狀態或者觸發一些行為事件。

什么情況下用到vuex?官網說：如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是，如果您需要構建是一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成為自然而然的選擇。

好，那么現在我就當你是開發一個比較大型的項目，在那些地方會用到vuex呢？ 隨著應用的復雜度增加,組件之間傳遞數據或組件的狀態會越來越多，舉個例子：當A組件進入B組件（A頁面進入B頁面）的時候，常常需要帶一些參數過去，那么此時你可能會選擇放在url后面當做參數傳遞過去，如果你不想輕易暴露參數，你有可能先存到session中或者localstorage中，然后進入到第二個頁面的時候再取出來。不錯，這確實是一種解決方法，而且用的不少。但這不是一個好的方法，這時候，你就需要vuex來幫助你了。另外，當你基本了解vuex的一些皮毛之后，你會發現vuex管理是基于模塊化的思想，那么這就對項目后期管理維護很友好了。

so,現在你就得來深入認識一下vuex的核心概念了。下面是個人理解的概念，首先在此之前建議最好先把官方文檔Vuex2.0概念過一遍。

vuex 就是把需要共享的變量全部存儲在一個對象里面，然后將這個對象放在頂層組件中供其他組件使用

父子組件通信時，我們通常會采用 props + emit 這種方式。但當通信雙方不是父子組件甚至壓根不存在相關聯系，或者一個狀態需要共享給多個組件時，就會非常麻煩，數據也會相當難維護

1.2 vuex中有什么

const store = new Vuex.Store({  state: {    name: 'weish',    age: 22  },  getters: {    personInfo(state) {      return `My name is ${state.name}, I am ${state.age}`;    }  }  mutations: {    SET_AGE(state, age) {      commit(age, age);    }  },  actions: {    nameAsyn({commit}) {      setTimeout(() => {        commit('SET_AGE', 18);      }, 1000);    }  },  modules: {    a: modulesA  }}

個就是最基本也是完整的 vuex 代碼； vuex 包含有五個基本的對象

state ：存儲狀態。也就是變量； getters ：派生狀態。也就是 set 、 get 中的 get ，有兩個可選參數： state 、 getters 分別可以獲取 state 中的變量和其他的 getters 。外部調用方式： store.getters.personInfo() 。就和 vue 的 computed 差不多； mutations ：提交狀態修改。也就是 set 、 get 中的 set ，這是 vuex 中唯一修改 state 的方式，但不支持異步操作。第一個參數默認是 state 。外部調用方式： store.commit('SET_AGE', 18) 。和 vue 中的 methods 類似。 actions ：和 mutations 類似。不過 actions 支持異步操作。第一個參數默認是和 store 具有相同參數屬性的對象。外部調用方式： store.dispatch('nameAsyn') 。 modules ： store 的子模塊，內容就相當于是 store 的一個實例。調用方式和前面介紹的相似，只是要加上當前子模塊名，如： store.a.getters.xxx()