像高手一樣重置Vuex的state

• 2019 年 10 月 7 日
• 筆記

背景描述

Vuex對於管理你的Vue應用很有用，但是如果你的應用很大，同時又把所有的應用狀態放到單個狀態對象上則會變的低效且難以維護。這種情況下，則需要分割到多個小的modules中。

一個Vuex的module可以代表任何你應用中可獨立分割的部分，例如：代表一個彈框、多步驟表單、購物車等等。

這些modules的狀態肯定會隨著應用的運行不時的變動，讓我們以購物車為例，一個購物車會包含用戶添加的商品列表，這個列表會在用戶刪除或者付款後被清除。

在Vuex的術語中，清空購物車意味著重置module的狀態。所以如果列表有數據，我們則會使用空數組來替換它。

實際操作

還是繼續我們的購物車例子，我們將module存放在modules目錄下，就像這樣：

store  ├── index.js  └── modules      └── cart.js

下面就是cart.js如何重置狀態的程式碼：

const getDefaultState = () => {    return {      items: [],      status: 'empty'    }  }    // initial state  const state = getDefaultState()    const actions = {    resetCartState ({ commit }) {      commit('resetState')    },    addItem ({ state, commit }, item) { /* ... */ }  }    const mutations = {    resetState (state) {      Object.assign(state, getDefaultState())    }  }    export default {    state,    getters: {},    actions,    mutations  }

程式碼的核心是創建一個工廠函數：getDefaultState，返回一個全新的默認狀態對象。我們兩個地方使用到它：初始化的時候以及重置的時候。