像高手一样重置Vuex的state

前端黑板报

发布于 2019-09-25 08:32:48

4.3K00

代码可运行

文章被收录于专栏：前端黑板报前端黑板报

运行总次数：0

代码可运行

背景描述

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
}