如何清空 Vuex 存储模块状态对象？

Question

如何清空一个Vuex store module state对象？我知道如何删除单个属性状态对象，例如 Vue.delete(state.slidesList, 'slide1')，但我想完全清空状态对象（而不是删除对象本身）而不失去反应性 在对象本身上，当删除单个属性时（使用 Vue.delete）删除反应式 getter 和 setter，我相信，如果这是错误的，请更正。

是否直接设置 state.slideList = {} 清空对象，同时仍然是反应性的？如果是，那么它意味着 state.slideList = {fname: 'Appu' } 是一种覆盖对象而不清空对象的方法（如果目标是用另一个对象完全覆盖对象，而不是清空并在其中重新写入）。

如果不是，用另一个新的非空对象覆盖状态对象的正确方法是什么。

谢谢

Answer 1

创建一个重置状态的突变。然后，用这样的默认值重置状态：

Object.assign(state, newState)

Answer 2

Vuex 有 replaceState 方法来替换商店的根状态。

Answer 3

set adds a property to a reactive object, ensuring the new property is also reactive, so triggers view updates. This must be used to add new properties to reactive objects, as Vue cannot detect normal property additions. doc

module.js

import Vue from 'vue'

const initialState = {
 foo: {},
 bar: {},
 // ...
}

const state = {...initialState}

const mutations = { // To reset a state
 RESET_FOO (state) {
  Vue.set(state, 'foo', initialState.foo)
 },

 UPDATE_FOO (state, payload) { // To update the state
  Vue.set(state, 'foo', payload)
 },

 UPDATE_IN_FOO (state, { key, value }) { // To update a key in a state
  Vue.set(state.foo, key, value)
 },

 RESET_MODULE (state) { // To reset the entire module
  Object.assign(state, initialState)
 }
}

如何清空 Vuex 存储模块状态对象？

How to empty a Vuex store module state object?

vuex

vuejs2

vuex-modules