programing

Vuex 스토어에 액세스할 수 없음

prostudy 2022. 5. 5. 10:21
반응형

Vuex 스토어에 액세스할 수 없음

나는 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;
        }
    }
}

인덱스 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가치관을 얻는다.
내 생각에 그것은 그들을 얻는 나쁜 방법인 것 같아.

누가 좀 도와줄래?

Vuex에서 모듈을 생성할 때 모듈에 제공한 이름에 따라 로컬 상태가 중첩된다(루트 상태에 액세스할 때 이 문제가 발생함).

예를 들어 일반 모듈의 로컬 상태에 액세스하려면 다음을 기록하십시오.

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

다음 사항에 유의하십시오.

동작 및 돌연변이는 여전히 글로벌 네임스페이스에 등록되어 있으며, 이를 통해 여러 모듈이 동일한 동작/동작 유형에 반응할 수 있다.게이터도 기본적으로 글로벌 네임스페이스에 등록된다.https://vuex.vuejs.org/guide/modules.html#namespacing

참조URL: https://stackoverflow.com/questions/71445123/vuex-store-is-inaccessible

반응형