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

时间:2017-10-25 13:46:44

标签: vue.js state vuex

我试图将现有的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

谢谢

2 个答案:

答案 0 :(得分:0)

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

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

对于使用商店的文件,您可以导入索引,然后按模块调用:

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

// ...

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

答案 1 :(得分:0)

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

除非将逻辑提升到全局命名空间并使用dynamic module registration

,否则无法创建新的状态对象