Vuex store 无法访问

Question

我做了一个 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')

之后，我在App.vue中创建了2个computed函数：

computed: {
    menuVisibilityState : function (){
      return this.$store.state.menuEnabled;
    },
    headersVisibilityState : function () {
      return this.$store.state.headerEnabled;
    }
  }

但是，我无法从 vuex:
获取它们

我尝试直接在 App.vue 中导入 general 并获取值。
它不起作用，我认为这是获得它们的糟糕方法。

有人可以帮助我吗？

Answer 1

当您在 Vuex 中创建模块时，本地状态 会根据您提供给模块的名称进行嵌套（当您访问根状态时会发生这种情况.).

在您的示例中，要访问 general 模块的本地状态，您可以编写：

computed: {
    menuVisibilityState : function (){
      return this.$store.state.general.menuEnabled;
    },
    headersVisibilityState : function () {
      return this.$store.state.general.headerEnabled;
    }
  }

请记住：

actions and mutations are still registered under the global namespace - this allows multiple modules to react to the same action/mutation type. Getters are also registered in the global namespace by default. https://vuex.vuejs.org/guide/modules.html#namespacing

Vuex store 无法访问

Vuex store is inaccessible

vue.js

vuex