Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

1.安裝

1.1 直接下載 / CDN 引用安裝

https://unpkg.com/vuex
Unpkg.com 提供了基于 NPM 的 CDN 鏈接。以上的鏈接會一直指向 NPM 上發布的最新版本。您也可以通過 https://unpkg.com/vuex@2.0.0
這樣的方式指定特定的版本。
在 Vue 之后引入 vuex
會進行自動安裝：

<script src="/path/to/vue.js"></script><script src="/path/to/vuex.js"></script>

1.2 NPM安裝

運行node執行如下代碼安裝vuex

npm install vuex

2. 為什么使用VUEX？

首先VUE崇尚組件開發，對于一個網站或者Web App來說組件與組件之間必定存在著業務關系。比如這樣的業務場景，即：購物車。這個對于現在的人來說最為熟悉，那么操作購物車的場景也是如此，一個商品的列表中把自己喜歡的商品添加到購物車中。那么對于程序而言，商品列表就是一個組件，購物車是另一個組件。從一個組件中把數據添加給另一個組件就是VUE中最常見的組件之間通信的例子（兄弟組件，或者說同級組件）。對于VUE和React而言，父組件與孩子組件之間通信最為簡單，使用props就可以。反之也不難，通過傳遞事件也可以完成。在沒有VUEX之前，那么兄弟組件之間通信相對較為麻煩，VUE提出采用一個空的BUS組件來完成。BUS組件就好比兄弟組件的橋梁。這種方式在維護比較小的工程時，可以一試，效果也不錯。但是對于較大的項目來說，這種BUS組件就不止一個了，那么組件與組件之間的維護就變得越來越難。尤其對于VUE、React這種單向數據流的框架。這里再詳細介紹一下單向數據流。

2.1 什么是單向數據流？

下面一個圖就能很清楚的顯示出單向數據流的理念：

對于一個組件來說這種理念是非常好的，view通過action改變數據的state，view在根據state來更新，一切都那么自然，那么和諧。但是，當我們的應用遇到多個組件共享狀態時，單向數據流的簡潔性很容易被破壞：

多個視圖依賴于同一狀態。
來自不同視圖的行為需要變更同一狀態。

對于問題一，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態傳遞無能為力。對于問題二，我們經常會采用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的代碼。

2.2 VUEX的誕生

為了解決上述帶來的問題，我們試想為什么不把組件的共享狀態抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的組件樹構成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態或者出發行為！
另外，通過定義和隔離狀態管理中的各種概念并強制遵守一定的規則，我們的代碼將會變得更結構化且易維護。
這就是 Vuex 背后的基本思想，借鑒了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是，Vuex 是專門為 Vue.js 設計的狀態管理庫，以利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新。

vuex

2.3 什么情況下我應該使用 Vuex？

雖然 Vuex 可以幫助我們管理共享狀態，但也附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。
如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是，如果您需要構建是一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成為自然而然的選擇。引用 Redux 的作者 Dan Abramov 的話說就是：Flux 架構就像眼鏡：您自會知道什么時候需要它。

3.核心概念

在上述描述中，已經很清楚了講解了什么是VUEX，為什么要使用VUEX，而且上述還提到了，要想使用VUEX就要清楚它獨有的一些概念。

3.1 state 單一狀態樹

Vuex 使用 單一狀態樹 —— 是的，用一個對象就包含了全部的應用層級狀態。至此它便作為一個『唯一數據源(SSOT)』而存在。這也意味著，每個應用將僅僅包含一個 store 實例。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在調試的過程中也能輕易地取得整個當前應用狀態的快照。
單狀態樹和模塊化并不沖突 —— 在后面的章節里我們會討論如何將狀態和狀態變更事件分布到各個子模塊中。

3.1.1 在 Vue 組件中獲得 Vuex 狀態

那么我們如何在 Vue 組件中展示狀態呢？由于 Vuex 的狀態存儲是響應式的，從 store 實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態：

// 創建一個 Counter 組件
var Counter = {
  template: "<div>{{ count }}</div>",
  computed: {
    count: function() {
      return store.state.count;
    }
  }
};

每當 store.state.count 變化的時候, 都會重新求取計算屬性，并且觸發更新相關聯的 DOM。

然而，這種模式導致組件依賴的全局狀態單例。在模塊化的構建系統中，在每個需要使用 state 的組件中需要頻繁地導入，并且在測試組件時需要模擬狀態。

Vuex 通過 store 選項，提供了一種機制將狀態從根組件『注入』到每一個子組件中（需調用 Vue.use(Vuex)）：

var app = new Vue({
  el: '#app',
  // 把 store 對象提供給 “store” 選項，這可以把 store 的實例注入所有的子組件
  store: store,
  components: { Counter: Counter },
  template: '\
    <div class="app">\
      <counter></counter>\
    </div>\
  '
});

通過在根實例中注冊 store 選項，該 store 實例會注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到。讓我們更新下 Counter 的實現：

var Counter = {
  template: "<div>{{ count }}</div>",
  computed: {
    count: function() {
      return this.$store.state.count;
    }
  }
};

3.1.2 mapState 輔助函數

當一個組件需要獲取多個狀態時候，將這些狀態都聲明為計算屬性時會顯得有些重復和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數幫助我們生成計算屬性，讓你少按幾次鍵：

// 在單獨構建的版本中輔助函數為 Vuex.mapState
var Vuex = require('vuex');
var Counter = {
  computed: Vuex.mapState({
    // 箭頭函數可使代碼更簡練
    count: function count(state) {
      return state.count;
    },

    // 傳字符串參數 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數
    countPlusLocalState: function(state) {
      return state.count + this.localCount;
    }
  })
};

當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字符串數組。

computed: mapState([
  // 映射 this.count 為 store.state.count
  'count'
])

3.1.3 組件仍然保有局部狀態

使用 Vuex 并不意味著你需要將所有的狀態放入 Vuex。雖然將所有的狀態放到 Vuex 會使狀態變化更顯式和易調試，但也會使代碼變得冗長和不直觀。如果有些狀態嚴格屬于單個組件，最好還是作為組件的局部狀態。你應該根據你的應用開發需要進行權衡和確定。

3.2 Getters

有時候我們需要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾并計數：

var counter = {
  computed: {
    doneTodosCount: function() {
      return this.$store.state.todos.filter(function (todo) {
        return todo.done;
      }).length;
    }
  }
};

如果有多個組件需要用到此屬性，我們要么復制這個函數，或者抽取到一個共享函數然后在多處導入它 —— 無論哪種方式都不是很理想。

Vuex 允許我們在 store 中定義『getters』（可以認為是 store 的計算屬性）。Getters 接受 state 作為其第一個參數：

var store = new Vuex.Store({
  state: {
    todos: [{ id: 1, text: '...', done: true }, { id: 2, text: '...', done: false }]
  },
  getters: {
    doneTodos: function(state) {
      return state.todos.filter(function (todo) {
        return todo.done;
      });
    }
  }
});

Getters 會暴露為 store.getters 對象：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getters 也可以接受其他 getters 作為第二個參數：

var store = new Vuex.Store({
  state: {
    todos: [{ id: 1, text: '...', done: true }, { id: 2, text: '...', done: false }]
  },
  getters: {
    doneTodos: function(state) {
      return state.todos.filter(function (todo) {
        return todo.done;
      });
    },
    doneTodosCount: function(state, getters) {//通過getters參數獲取當前的getters
      return getters.doneTodos.length;
    }
  }

store.getters.doneTodosCount // -> 1

我們可以很容易地在任何組件中使用它：

computed: {
  doneTodosCount:function {
    return this.$store.getters.doneTodosCount
  }
}

3.2.1 mapGetters 輔助函數

mapGetters 輔助函數僅僅是將 store 中的 getters 映射到局部計算屬性：

var Vuex = require('vuex');
export default {
  computed: Vuex.mapGetters(['doneTodosCount', 'anotherGetter']))
  }
}

如果你想將一個 getter 屬性另取一個名字，使用對象形式：

mapGetters({
  // 映射 this.doneCount 為 store.getters.doneTodosCount
  doneCount: 'doneTodosCount'
})

3.3 Mutations

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutations 非常類似于事件：每個 mutation 都有一個字符串的事件類型 (type) 和一個回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數：

var store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment: function(state) {
      // 變更狀態
      state.count++;
    }
  }
});

你不能直接調用一個 mutation handler。這個選項更像是事件注冊：“當觸發一個類型為 increment 的 mutation 時，調用此函數。”要喚醒一個 mutation handler，你需要以相應的 type 調用 store.commit 方法：

store.commit('increment')

3.3.1 參數的傳遞

你可以向 store.commit 傳入額外的參數，即 mutation 的載荷（playload）：

mutations: {
  increment :function(state, n) {
    state.count += n
  }
}

//在action中調用mutation的時候
store.commit('increment', 10)

在大多數情況下，載荷應該是一個對象，這樣可以包含多個字段并且記錄的 mutation 會更易讀：

// ...
mutations: {
  increment:function(state, payload) {
    state.count += payload.amount
  }
}
//在action中調用mutation的時候
store.commit('increment', {
  amount: 10
})

3.3.2 對象風格的提交方式

提交 mutation 的另一種方式是直接使用包含 type 屬性的對象：

store.commit({
  type: 'increment',
  amount: 10
})

當使用對象風格的提交方式，整個對象都作為載荷傳給 mutation 函數，因此 handler 保持不變：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

3.3.3 mutation 必須是同步函數

一條重要的原則就是要記住 mutation 必須是同步函數。為什么？請參考下面的例子：

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

現在想象，我們正在 debug 一個 app 并且觀察 devtool 中的 mutation 日志。每一條 mutation 被記錄，devtools 都需要捕捉到前一狀態和后一狀態的快照。然而，在上面的例子中 mutation 中的異步函數中的回調讓這不可能完成：因為當 mutation 觸發的時候，回調函數還沒有被調用，devtools 不知道什么時候回調函數實際上被調用 —— 實質上任何在回調函數中進行的的狀態的改變都是不可追蹤的。

3.3.4 在組件中提交 Mutations

你可以在組件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用（需要在根節點注入 store）。

3.4 Actions

Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態。
Action 可以包含任意異步操作。

讓我們來注冊一個簡單的 action：

var store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: function(state) {
      state.count++;
    }
  },
  actions: {
    increment: function(store) {
      store.commit('increment');
    }
  }
});

** Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象 ** ，因此你可以調用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。

當我們在之后介紹到 Modules 時，你就知道 context 對象為什么不是 store 實例本身了。

實踐中，我們會經常會用到 ES2015 的參數解構來簡化代碼（特別是我們需要調用 commit 很多次的時候）：

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

//上述代碼等價于
actions: {
  increment: function(context) {
    var commit = context.commit;
    commit('increment');
  }
}

3.4.1 分發 Action

Action 通過 store.dispatch 方法觸發：

store.dispatch('increment')

乍一眼看上去感覺多此一舉，我們直接分發 mutation 豈不更方便？實際上并非如此，還記得 mutation 必須同步執行這個限制么？Action 就不受約束！我們可以在 action 內部執行異步操作：

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

Actions 支持同樣的載荷方式和對象方式進行分發：

// 以載荷形式分發

store.dispatch('incrementAsync', {
  amount: 10
})

// 以對象形式分發
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

來看一個更加實際的購物車示例，涉及到調用異步 API 和分發多重 mutations：

actions: {
  checkout ({ commit, state }, products) {
    // 把當前購物車的物品備份起來
    const savedCartItems = [...state.cart.added]
    // 發出結賬請求，然后樂觀地清空購物車
    commit(types.CHECKOUT_REQUEST)
    // 購物 API 接受一個成功回調和一個失敗回調
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失敗操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

//不習慣看es6語法的可以看下面
actions: {
    checkout: function checkout(context, products) {
      var commit = context.commit,
      var state = context.state;

      // 把當前購物車的物品備份起來
      var savedCartItems = [].concat(_toConsumableArray(state.cart.added));
      // 發出結賬請求，然后樂觀地清空購物車
      commit(types.CHECKOUT_REQUEST);
      // 購物 API 接受一個成功回調和一個失敗回調
      shop.buyProducts(products,
      // 成功操作
      function () {
        return commit(types.CHECKOUT_SUCCESS);
      },
      // 失敗操作
      function () {
        return commit(types.CHECKOUT_FAILURE, savedCartItems);
      });
    }
  }

注意我們正在進行一系列的異步操作，并且通過提交 mutation 來記錄 action 產生的副作用（即狀態變更）。

3.4.2 在組件中分發 Action

你在組件中使用 this.$store.dispatch('xxx') 分發 action，或者使用 mapActions 輔助函數將組件的 methods 映射為 store.dispatch 調用（需要先在根節點注入 store）：

3.4.3 組合 Actions

Action 通常是異步的，那么如何知道 action 什么時候結束呢？更重要的是，我們如何才能組合多個 action，以處理更加復雜的異步流程？

第一件事你需要清楚的是 store.dispatch 的返回的是被觸發的 action 函數的返回值，因此你可以在 action 中返回 Promise：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

現在你可以：

store.dispatch('actionA').then(() => {
  // ...
})

在另外一個 action 中也可以：

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

3.5 Modules

使用單一狀態樹，導致應用的所有狀態集中到一個很大的對象。但是，當應用變得很大時，store 對象會變得臃腫不堪。

為了解決以上問題，Vuex 允許我們將 store 分割到模塊（module）。每個模塊擁有自己的 state、mutation、action、getters、甚至是嵌套子模塊——從上至下進行類似的分割：

var moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

var moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

var store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

3.5.1 模塊的局部狀態

對于模塊內部的 mutation 和 getter，接收的第一個參數是模塊的局部狀態。

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment: (state) {
      // state 模塊的局部狀態
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

同樣，對于模塊內部的 action，context.state 是局部狀態，根節點的狀態是

const moduleA = {
  // ...
  actions: {
    incrementIfOdd ({ state, commit }) {
      if (state.count % 2 === 1) {
        commit('increment')
      }
    }
  }
}
對于模塊內部的 getter，根節點狀態會作為第三個參數：

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

3.5.2 命名空間

模塊內部的 action、mutation、和 getter 現在仍然注冊在全局命名空間——這樣保證了多個模塊能夠響應同一 mutation 或 action。你可以通過添加前綴或后綴的方式隔離各模塊，以避免名稱沖突。你也可能希望寫出一個可復用的模塊，其使用環境不可控。例如，我們想創建一個 todos 模塊：

// types.js
// 定義 getter、action、和 mutation 的名稱為常量，以模塊名 `todos` 為前綴
export const DONE_COUNT = 'todos/DONE_COUNT'
export const FETCH_ALL = 'todos/FETCH_ALL'
export const TOGGLE_DONE = 'todos/TOGGLE_DONE'





// modules/todos.js
import * as types from '../types'
// 使用添加了前綴的名稱定義 getter、action 和 mutation
const todosModule = {
  state: { todos: [] },

  getters: {
    [types.DONE_COUNT] (state) {
      // ...
    }
  },

  actions: {
    [types.FETCH_ALL] (context, payload) {
      // ...
    }
  },

  mutations: {
    [types.TOGGLE_DONE] (state, payload) {
      // ...
    }
  }
}

3.5.3 模塊動態注冊

在 store 創建之后，你可以使用 store.registerModule 方法注冊模塊：

store.registerModule('myModule', {
  // ...
})

模塊的狀態將是 store.state.myModule。
模塊動態注冊功能可以讓其他 Vue 插件為了應用的 store 附加新模塊，以此來分割 Vuex 的狀態管理。例如，vuex-router-sync 插件可以集成 vue-router 與 vuex，管理動態模塊的路由狀態。你也可以使用 **store.unregisterModule(moduleName) **動態地卸載模塊。

注意，你不能使用此方法卸載靜態模塊（在創建 store 時聲明的模塊）。

4 項目結構

Vuex 并不限制你的代碼結構。但是，它規定了一些需要遵守的規則：

應用層級的狀態應該集中到單個 store 對象中。
提交 mutation 是更改狀態的唯一方法，并且這個過程是同步的。
異步邏輯都應該封裝到 action 里面。

只要你遵守以上規則，如何組織代碼隨你便。如果你的 store 文件太大，只需將 action、mutation、和 getters 分割到單獨的文件。

對于大型應用，我們會希望把 Vuex 相關代碼分割到模塊中。下面是項目結構示例：

├── index.html
├── main.js
├── api
│ └── ... # 抽取出API請求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 我們組裝模塊并導出 store 的地方
├── actions.js # 根級別的 action
├── mutations.js # 根級別的 mutation
└── modules
├── cart.js # 購物車模塊
└── products.js # 產品模塊

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

11.vuex 探索之路

11.vuex 探索之路

1.安裝

1.1 直接下載 / CDN 引用安裝

1.2 NPM安裝

2. 為什么使用VUEX？

2.1 什么是單向數據流？

2.2 VUEX的誕生

2.3 什么情況下我應該使用 Vuex？

3.核心概念

3.1 state 單一狀態樹

3.1.1 在 Vue 組件中獲得 Vuex 狀態

3.1.2 mapState 輔助函數

3.1.3 組件仍然保有局部狀態

3.2 Getters

3.2.1 mapGetters 輔助函數

3.3 Mutations

3.3.1 參數的傳遞

3.3.2 對象風格的提交方式

3.3.3 mutation 必須是同步函數

3.3.4 在組件中提交 Mutations

3.4 Actions

3.4.1 分發 Action

3.4.2 在組件中分發 Action

3.4.3 組合 Actions

3.5 Modules

3.5.1 模塊的局部狀態

3.5.2 命名空間

3.5.3 模塊動態注冊

4 項目結構

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

11.vuex 探索之路

1.安裝

1.1 直接下載 / CDN 引用安裝

1.2 NPM安裝

2. 為什么使用VUEX？

2.1 什么是單向數據流？

2.2 VUEX的誕生

2.3 什么情況下我應該使用 Vuex？

3.核心概念

3.1 state 單一狀態樹

3.1.1 在 Vue 組件中獲得 Vuex 狀態

3.1.2 mapState 輔助函數

3.1.3 組件仍然保有局部狀態

3.2 Getters

3.2.1 mapGetters 輔助函數

3.3 Mutations

3.3.1 參數的傳遞

3.3.2 對象風格的提交方式

3.3.3 mutation 必須是同步函數

3.3.4 在組件中提交 Mutations

3.4 Actions

3.4.1 分發 Action

3.4.2 在組件中分發 Action

3.4.3 組合 Actions

3.5 Modules

3.5.1 模塊的局部狀態

3.5.2 命名空間

3.5.3 模塊動態注冊

4 項目結構

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

2. 為什么使用VUEX？

2.3 什么情況下我應該使用 Vuex？