Vuex使用(實戰記錄)

Vuex 是什麼？

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

• 多個視圖依賴於同一狀態。
• 來自不一樣視圖的行爲須要變動同一狀態。

對於問題一，傳參的方法對於多層嵌套的組件將會很是繁瑣，而且對於兄弟組件間的狀態傳遞無能爲力。

對於問題二，咱們常常會採用父子組件直接引用或者經過事件來變動和同步狀態的多份拷貝。以上的這些模式很是脆弱，一般會致使沒法維護的代碼。

借鑑了 Flux、Redux 和 The Elm Architecture。與其餘模式不一樣的是，Vuex 是專門爲 Vue.js 設計的狀態管理庫，以利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新。

若是您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了。可是，若是您須要構建一箇中大型單頁應用，您極可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲天然而然的選擇。

store

主要分爲5個模塊

• state: 存儲數據

• getter: 獲取store 屬性方法

• mutatuon: 更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation,相似於事件。

• action: Action 提交的是 mutation，而不是直接變動狀態。

• module：模塊化

1. state

const state = {
  title: 'doubanMovie', // 標題
  movingList: {  // 列表
    subjects: []
    },
  }
複製代碼

2. getter: 能夠認爲是 store 的計算屬性 mapGetters 輔助函數

export const getters = {
  title: state => {
    return state.title
  },
  movingList: state => {
    for (let subject of state.movingList.subjects) {
      subject.rating.average = subject.rating.average / 2
    }
    return state.movingList
  }
}
複製代碼

3. mutatuin

更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似於事件：每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數： mutation 都是同步事務

import * as types from './types' //常量 類名
export const mutations = {
  [types.MOVING_TITLE] (state, {title}) {
    state.title = title
  },
  [types.MOVING_LIST] (state, {list}) {
    state.movingList = list
  },
}
複製代碼

使用常量替代 mutation 事件類型在各類 Flux 實現中是很常見的模式。

4. action: Action 相似於 mutation，不一樣在於：

• Action 提交的是 mutation，而不是直接變動狀態。
• Action 能夠包含任意異步操做。

export const actions = {
  /** * 獲取列表 * @param commit */
  getMoving ({commit, state}) {
    utils.get('/movie/in_theaters', {city: state.city}).then(res => {
      commit('MOVING_LIST', {list: res})
      commit('MOVING_LOADING', {loading: false})
    })
  }
}
複製代碼

Action 經過 store.dispatch 方法觸發：分發 store.dispatch('increment')

5. module Vuex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割：

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

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

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

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態
複製代碼

項目結構 （只是推薦）

1. 應用層級的狀態應該集中到單個 store 對象中。

2. 提交 mutation 是更改狀態的惟一方法，而且這個過程是同步的。

3. 異步邏輯都應該封裝到 action 裏面。

對於大型應用，會但願把 Vuex 相關代碼分割到模塊中。下面是項目結構示例：

├── index.html
├── main.js
├── api
│   └── ... # abstractions for making API requests
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # where we assemble modules and export the store
    ├── actions.js        # root actions
    ├── mutations.js      # root mutations
    └── modules
        ├── cart.js       # cart module
        └── products.js   # products module
複製代碼