Question

如何完全清空Vuex存储模块状态对象？我知道如何删除状态对象的单个属性，例如Vue.delete(state.slidesList, 'slide1')，但是我想完全清空状态对象（而不是删除对象本身），而又不会在对象本身上失去反应性我相信，删除单个属性（使用Vue.delete）会删除反应性的吸气剂和吸气剂，如果这是错误的话，请正确。

直接设置state.slideList = {}会清空对象，同时仍保持反应性吗？如果是，则表示state.slideList = {fname: 'Appu' }是覆盖对象而不清空对象的一种方法（如果目标是用另一个对象完全覆盖对象，而不是清空并重新写入对象）。

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

谢谢

Answer 1

set 将属性添加到reactive对象，确保新属性也是可响应的，因此触发视图更新。这必须用于添加 Vue无法检测到法线，因此为反应性对象添加了新属性属性添加。 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)
 }
}

Answer 2

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

Object.assign(state, newState)

Answer 3

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

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

3 个答案: