如何在没有嵌套对象的情况下使用 Vuex 模块状态？答案

【问题标题】：How can I use Vuex modules state without nested objects?如何在没有嵌套对象的情况下使用 Vuex 模块状态？
【发布时间】：2018-04-06 15:30:34
【问题描述】：

我正在尝试将现有的 Vuex 状态转换为模块。我正在尝试使用这样的模块：

const moduleA = {
  state: {},

mutations: {
  update (state, payload) { // payload is an object
  state = payload // doesn't work
  }
},

我正在注册模块：

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

问题是：是否可以像我尝试的那样在不嵌套的情况下使用状态？或者唯一的方法是有类似的东西：

const moduleA = {
  state: {
   one: {}
  },
  mutations: {
    update (state, payload) {
      state.one = payload // it works
    },
  },
}

理想情况下，我希望拥有与以前相同的结构，并且能够以state.a 而不是state.a.one 获得状态

谢谢

【问题讨论】：

如果你替换了完整的状态，你会失去 Vue 的响应性。您是否尝试过使用Object.assign(state, payload) 而不是state = payload？
您解决了这个问题吗？我现在正面临这个问题。

标签： vue.js state vuex

【解决方案1】：

是的，你可以——只需将模块重构为单独的文件，然后使用索引文件将它们组合在一起：

import Vue from 'vue'
import Vuex from 'vuex'

import users from './store.users.js'
import entries from './store.entries.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    users,
    entries
  }
})

export default store

然后在每个模块的文件中（例如store.entries.js，您可以按照您熟悉的模式，但将namespaced 设置为true：

const module = {
  namespaced: true,
  state: {},
  getters: {},
  mutations: {},
  actions: {}
}

module.actions.update = ({ commit, state }, payload) => {
  // commit, state, etc refer to the local store
}

export default module

对于使用store的文件，可以导入索引，然后按模块调用：

import store from '../stores/store.index.js'

// ...

store.dispatch('entries/update', payload)

【讨论】：

抱歉，您没有理解我的问题。我已经使用了单独的文件等。我的问题是：我可以不将状态包装在对象的模块内吗？我的意思是：在没有模块的旧版本中，我有state = { users: [] }。例如，我可以将模块中的状态不作为对象而是作为数组吗？为了能够使用相同的结构而不是嵌套对象（如果我在模块中使用对象 state = { users: [] } 我的用户数组的路径将是 state.users.users 而不是 state.users）

【解决方案2】：

您可以使用state = Object.assign(state, payload)。但请注意，这意味着您保留所有现有道具并浅合并新道具。

除非将逻辑提升到全局命名空间并使用dynamic module registration，否则无法创建新状态对象

【讨论】：