2020前端技術面試必備Vue：(四)Vuex狀態管理

Vuex

安裝

npm install vuex --save

yarn add vuex


// Vuex  依賴 Promise，所有需要安裝 es6-promise

npm install es6-promise --save 
yarn add es6-promise 

Vuex 介紹

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    message: '測試信息'
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

State ——>驅動應用的數據源

1.在組件中 獲取store 中的state 數據

1. 在組件中 獲取store 中的state 數據

	// 一般是 通過計算屬性中聲明屬性，然後使用  this.$store.state.數據源   來獲取數據的
  computed: {
    count () {
      return store.state.count
    }
  }

如何獲取多個state呢？

如果想獲取多個state數據呢，其實可以在computed 中寫多個屬性 來獲取state，但是當state變化時，會重新求取計算屬性，並且觸發更新相關聯的 DOM，非常影響性能。

好在Vuex 提供了 mapState 輔助函數，減少不必要的開銷

1. 首先第一步 必須引入 mapState  
import { mapState } from 'vuex'

2. 在computed 使用即可
computed: mapState({
    counts: state => state.count,
    //counts為自定義的屬性： state參數 是stote中的state，然後直接通過state。數據源獲取即可
    addNumber (state) {
      return this.numbers + state.count
    }
  })


3. 在頁面 直接使用 自定義的屬性

Getter

作用類似 computed，但有緩存功能。

使用場景： 當一個組件需要過濾後的state值，你可以在組件中通過filter進行過濾，那麼其它組件也需要過濾後的值，你就的再 次過濾state。

​ 當使用getter 處理後，一次處理，多次使用，提高效率

export default new Vuex.Store({
  state: {
    count: 0,
    message: '測試信息',
    arr: [1, 2, 3, 4, 5, 6]
  },
  getters: {
    filterArr: state => {
      return state.arr.filter(items => items % 2 === 0)
    }
  }
})

mapGetters 輔助函數

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

在組件中訪問getter 值

this.$store.getters.自定義的屬性

在 其它 組件訪問該getters 時，值仍然時  [ 2, 4, 6 ]  過濾後的

Mutation

Mutation 是用來更改Store的狀態的唯一方法。

它由 事件類型 和 回調函數構成。回調函數是用來更改state狀態的，參數為state

使用mutation：

1. 必須在 mutation中註冊事件，
2. 然後在組件中通過 store.commit(事件名) 來 觸發改變state的狀態

注意：

store.commit 參數

store.commit 接收兩個參數

​ 第一個參數為： store.mutation中的事件名

​ 第二個參數為： 要傳遞的 載荷

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


store.commit('increment', 10)

mapMutations輔助函數

mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用（需要在根節點注入 store）。

對象的提交方式

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


mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}store.commit({
  type: 'increment',
  amount: 10
})

Mutation 使用技巧

在多人協作開發時，隨著 mutation 的 type 增多，會維護困難。

官方推薦採用 使用 事件類型，來處理,開發效率提高。

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我們可以使用 ES2015 風格的計算屬性命名功能來使用一個常量作為函數名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

Action

Action 功能類似 Mutation，

Action 支持 異步操作

Action 提交的 mutation, 不是直接修改state狀態

Action 接收參數： 與 store 實例具有相同方法和屬性的 context 對象

實例

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

在組件中分發Action

this.$store.dispatch('xxx')

異步執行Action

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

mapActions輔助函數

Action 也支持載荷

// 以載荷形式分發
store.dispatch('incrementAsync', {
  amount: 10
})

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

Module 模塊分割

當所有狀態對象都集中在個大的對象中，store維護將變得困難。這時，可以使用模塊分割成多個對象，最後將對象掛載到store的modeule中,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 的狀態