访问Vuex子模块内部状态与$存储对象

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它会比这多一点的努力。研究它。

EDIT 1

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

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

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