了解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 包含有五個基本的對象

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

1.3 vue-cli中使用vuex的方式

目錄結構

├── index.html├── main.js├── components└── store  ├── index.js     # 我們組裝模塊并導出 store 的地方  ├── state.js     # 跟級別的 state  ├── getters.js    # 跟級別的 getter  ├── mutation-types.js # 根級別的mutations名稱（官方推薦mutions方法名使用大寫）  ├── mutations.js   # 根級別的 mutation  ├── actions.js    # 根級別的 action  └── modules    ├── m1.js     # 模塊1    └── m2.js     # 模塊2

state示例

const state = {  name: 'weish',  age: 22};export default state;

getter示例

getters.js 示例（我們一般使用 getters 來獲取 state 的狀態，而不是直接使用 state ）

export const name = (state) => {  return state.name;}export const age = (state) => {  return state.age}export const other = (state) => {  return `My name is ${state.name}, I am ${state.age}.`;}

mutation-type示例

將所有 mutations 的函數名放在這個文件里

export const SET_NAME = 'SET_NAME';export const SET_AGE = 'SET_AGE';

mutations示例

import * as types from './mutation-type.js';export default {  [types.SET_NAME](state, name) {    state.name = name;  },  [types.SET_AGE](state, age) {    state.age = age;  }};

actions示例

異步操作、多個 commit 時

import * as types from './mutation-type.js';export default {  nameAsyn({commit}, {age, name}) {    commit(types.SET_NAME, name);    commit(types.SET_AGE, age);  }}

modules