第二个更好的选择

Question

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
    },
})

和Users.js：

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

从我的组件中，我这样访问Users商店：

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

但我不明白为什么我要拨打this.$store.state.Users而不是this.$store.Users

我的意思是，模块Users还没有在商店的状态下定义吗？

Answer 1

<强>解释

this.store.state.Users.users

第一个Users属性访问器代表模块的名称。
第二个users属性表示内部对象属性 Users模块的状态

如果您想致电this.$store.state.Users而不是this.store.state.Users.users来访问您的用户数组，请以稍微不同的方式定义Users.js。

参见代码：

<强> Users.js

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

现在状态持平。所以不需要额外的数据访问器。

第二个更好的选择

使用getters。

查看第二个选项的代码：

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

export default {
 state,
 getters
}

现在你可以写：$this.store.getters['getUsers']

可能与您的namespaced:true相比，这需要更多的努力。研究它。

编辑1

this.$store是一个对象。它包含mutations，getters，dispatch等方法。这个对象的一个属性是state本身。所以如果你想直接从$store对象访问状态，你显然必须直接访问它：this.$store.state ...

this.$store.Users.state这种情况没有发生。 vuex引擎不会为每个模块添加另一个state属性。

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

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

1 个答案:

第二个更好的选择

编辑1