我做了一個vuex商店：
export const general = {
namespaced: true,
state: {
menuEnabled: true,
headerEnabled: true
},
getters: {
menuState: state => state.menuEnabled,
headerState: state => state.headerEnabled
},
actions: {
setMenuVisibility({commit}, visibility) {
commit('setMenuVisibility', visibility);
},
setHeaderVisibility({commit}, visibility) {
commit('setHeaderVisibility', visibility);
}
},
mutations: {
setMenuVisibility(state, visibility){
state.menuEnabled = visibility;
},
setHeaderVisibility(state, visibility){
state.headerEnabled = visibility;
}
}
}
index.js
import { createStore } from "vuex";
import { auth } from "./auth.module";
import {general} from "./general.module";
const store = createStore({
modules: {
general,
auth
},
});
export default store;
main.js
import router from "./router";
import store from "./store";
createApp(App)
.use(store)
.use(router)
.mount('#app')
之后，我在中創建了 2 個computed函式App.vue：
computed: {
menuVisibilityState : function (){
return this.$store.state.menuEnabled;
},
headersVisibilityState : function () {
return this.$store.state.headerEnabled;
}
}
但是，我無法從以下位置獲取它們vuex：
我嘗試general直接匯入App.vue并獲取值。
它不起作用，我認為這是獲取它們的壞方法。
有人可以幫助我嗎？
uj5u.com熱心網友回復：
當您在 Vuex 中創建模塊時，本地狀態會根據您提供給模塊的名稱進行嵌套（當您訪問根狀態時會發生這種情況。）。
在您的示例中，要訪問通用模塊的本地狀態，您可以撰寫：
computed: {
menuVisibilityState : function (){
return this.$store.state.general.menuEnabled;
},
headersVisibilityState : function () {
return this.$store.state.general.headerEnabled;
}
}
請記住：
動作和突變仍然在全域命名空間下注冊——這允許多個模塊對相同的動作/突變型別做出反應。默認情況下，Getter 也注冊在全域命名空間中。 https://vuex.vuejs.org/guide/modules.html#namespacing
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/442213.html
下一篇：如何發出文本輸入的全部值？