Vuejs2 使用$store对象访问Vuex子模块内部状态

和一个Users.js：

import Vue from 'vue'
import Vuex from 'vuex'
import Users from './modules/Users'

Vue.use(Vuex)

export const store = new Vuex.Store({
    namespaced: true,
    state: {
        foo: false,
    },
    modules: {
        Users
    },
})

通过我的组件，我访问

用户

存储，如下所示：

// initial state
const state = {
    users: [],
}
export default {
    state
}

但是我不明白为什么我必须调用

this.$store.state.Users

而不是

this.$store.Users

---

我的意思是，模块

用户

未在存储权限的状态中定义？

说明：

this.store.state.Users.Users

• 第一个

  用户

  属性访问器表示模块的名称
• 第二个

  users

  属性表示

  用户

  模块的状态

如果要调用

this.store.state.Users

而不是

this.store.state.Users.Users

来访问用户数组，请以稍微不同的方式定义

Users.js

参见代码：

Users.js

this.$store.state.Users.users.forEach((el) => {}

现在情况是平的。因此，不需要额外的数据访问器

第二个更好的选择 使用

请参见第二个选项的代码：

// initial state
const state = []
export default {
    state
}

现在您只需编写：

$this.store.getters['getUsers']

可能使用

namespaced:true

会比这需要更多的努力。研究一下

编辑1

此.$store

是一个对象。它包含

突变

、

获取者

、诸如

分派

等方法。此对象的属性之一是

状态

本身。因此，如果要直接从

$store

对象访问状态，显然必须直接访问它：

this.$store.state…

this.$store.Users.state

这不会发生。vuex引擎不会为每个模块添加另一个

状态

属性

---

选择第二个更好的选项-。这是最好的做法。

谢谢，但我想知道为什么商店和用户之间有一个

状态

：

这个。$store.state.Users

。我希望

this.$store.state

中的所有内容都属于主数据存储的状态，而

this.$store.Users.state

将是用户存储的状态。

const state = {
  users: []
}
const getters = {
  getUsers(state) {
    return state.users
  }
}

export default {
 state,
 getters
}