訪問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。這是最好的做法。