如何在vuex商店中清除状态？

Question

我在vuex商店的州很大.

有没有办法一次性重置状态中的所有数据,而不是手动将所有数据设置为null？

Answer 1

我刚刚找到了适合我的优秀解决方案.

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) {
    // Merge rather than replace so we don't lose observers
    // https://github.com/vuejs/vuex/issues/1118
    Object.assign(state, getDefaultState())
  }
}

export default {
  state,
  getters: {},
  actions,
  mutations
}

像Pro一样重置Vuex模块状态

感谢Taha Shashtari的出色解决方案.

迈克尔,

Answer 2

使用以下解决方案后更新一点

事实证明,如果你使用replaceState一个空的对象({}),你的状态道具就会消失,最终会产生反应.所以实质上你必须实际重置状态中的每个属性然后使用store.replaceState(resetStateObject).对于没有模块的商店,您基本上可以执行以下操作:

let state = this.$store.state;
let newState = {};

Object.keys(state).forEach(key => {
  newState[key] = null; // or = initialState[key]
});

this.$store.replaceState(newState);

更新(来自评论):如果只需要重置/定义单个模块并保持其余模块,该怎么办？

如果您不想重置所有模块,只需重置所需的模块,并使另一个模块保持当前状态.

例如,假设您有多个模块,并且您只想a使用我们将调用的上述方法将模块重置为其初始状态resetStateA.然后,您将克隆原始状态(包括重置前的所有模块).

var currentState = deepClone(this.state)

deepClone你选择的深度克隆方法在哪里(lodash有一个很好的选择).此克隆在重置之前具有当前状态A. 所以让我们覆盖它

var newState = Object.assign(currentState, {
  a: resetStateA
});

并使用该新状态replaceState,其中包括所有模块的当前状态,但a具有初始状态的模块除外:

this.$store.replaceState(newState);

原始解决方案

我找到了这个方便的方法Vuex.store.您可以使用replaceState如下方式快速轻松地清除所有状态:

store.replaceState({})

它适用于单个商店或模块,它保留了所有州属性的反应性.请参阅Vuex api doc页面,并在页面中查找replaceState.

对于模块

如果您使用模块替换商店,则必须为每个模块包含空状态对象.因此,举例来说,如果你有模块a和b,你会怎么做:

store.replaceState({
  a: {},
  b: {}
})

Answer 3

您可以声明一个初始状态，然后按属性将其重置为该状态。您不能只做state = initialState，否则会失去反应性。

这是我们正在处理的应用程序中的处理方式：

let initialState = {
    "token": null,
    "user": {}
}

const state = Vue.util.extend({}, initialState)

const mutations = {
    RESET_STATE(state, payload) {
       for (let f in state) {
        Vue.set(state, f, initialState[f])
       }
    }
}

Answer 4

我不确定你的用例是什么，但我不得不做类似的事情。当用户注销时，我想清除应用程序的整个状态 - 所以我只是做了window.reload. 也许不完全是你所要求的，但如果这就是你想要清理商店的原因，也许是另一种选择。

Answer 5

如果您执行 state = {}，您将删除属性的反应性，并且您的 getters 突变将突然停止工作。

您可以拥有一个子属性，例如：

state: {
  subProperty: {
    a: '',
    lot: '',
    of: '',
    properties: '',
    .
    .
    .
  }
}

执行 state.subProperty = {} 应该会有所帮助，而不会失去反应性。

你不应该有一个太大的状态，将它们分解为不同的模块并导入到你的 vuex 存储中，如下所示：

import Vue from 'vue'
import Vuex from 'vuex'
import authorization from './modules/authorization'
import profile from './modules/profile'

Vue.use(Vuex)

export const store = new Vuex.Store({
  modules: {
    authorization,
    profile
  }
})

现在在您的个人文件中：

// modules/authorization.js
import * as NameSpace from '../NameSpace'
import { someService } from '../../Services/something'

const state = {
  [NameSpace.AUTH_STATE]: {
    auth: {},
    error: null
  }
}

const getters = {
  [NameSpace.AUTH_GETTER]: state => {
    return state[NameSpace.AUTH_STATE]
  }
}

const mutations = {
  [NameSpace.AUTH_MUTATION]: (state, payload) => {
    state[NameSpace.AUTH_STATE] = payload
  },
}

const actions = {
  [NameSpace.ASYNC_AUTH_ACTION]: ({ commit }, payload) => {
    someService.login(payload.username, payload.password)
      .then((user) => {
        commit(NameSpace.AUTH_MUTATION, {auth: user, error: null})
      })
      .catch((error) => {
        commit(NameSpace.AUTH_MUTATION, {auth: [], error: error})
      })
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

如果你想清除状态，你可以使用一个突变工具：

state[NameSpace.AUTH_STATE] = {
  auth: {},
  error: null
}