구성 요소에서 Vuex 데이터스토어를 찾을 수 없습니다.

구성 요소에서 Vuex 데이터스토어를 찾을 수 없습니다.

Vue, Vuetify, Vue-Router 및 Vuex와 함께 프로젝트를 사용하고 있습니다.그 목적은 Vue를 통한 확장성을 활용하기 위해 모듈 접근 방식으로 사이드바를 사용하여 기본 레이아웃을 작성하는 것이었습니다.그래서 Store라는 폴더를 만들었습니다.이 폴더에는 모듈 폴더가 있습니다.스토어 폴더 내의 인덱스 파일은 다음과 같습니다.

import Vue from 'vue';
import Vuex from 'vuex';
import global from './Modules/Global';

Vue.use(Vuex);

export default new Vuex.Store({
     modules: {
          site: global
     }
});

모듈은 액션, 게터, 돌연변이 및 상태를 포함한 단일 파일로 분할됩니다.

const actions = {
    sidebarState: ({ commit }, status) => {
        commit('openOrCloseSidebar', status);
    }
}

const mutations = {
    openOrCloseMenu: (status) => {
        if (status !== true)
            return state.sidebar = true;

        return state.sidebar = false;
    }
};

const getters = {

};

const state = {
    sidebar: true
};

export default {
    namespaced: true,
    actions,
    mutations,
    getters,
    state
};

Vue 인스턴스를 다음과 같이 호출합니다.

import Vue from 'vue/dist/vue';
import Vuetify from 'vuetify';
import Axios from 'axios';

import application from './Template/Application.vue';

import router from './Router';
import store from './Store';
import { sync } from 'vuex-router-sync';

Vue.use(Vuetify);
Vue.use(router);
Vue.use(store);

sync(store, router);

var vue = new Vue({
    el: '#application',
    template: '<application></application>',
    components: {
        application
    },

    router: router,
    store: store
});

하지만 내가 전화했을 때this.$store.global.state.sidebar또는this.$store.state.sidebarVue가 내 자산을 찾을 수 없습니다.다음과 같은 에러가 표시됩니다.

정의되지 않은 글로벌 속성을 읽을 수 없습니다.

이 오류는 상태도 참조하지만 네임스페이스를 사용하고 있기 때문에 위의 구문이 반영되어야 한다고 생각합니다.내가 그걸 부르려는 곳은 여기야.

<template>
    <v-container>
        <application_sidebar :my-prop="menu"></application_sidebar>
        <application_navigation :my-prop="menu"></application_navigation>        
    </v-container>
</template>

<script type="text/javascript">
    import application_navigation from './Navigation.vue'
    import application_sidebar from './Sidebar.vue';
    import { mapState } from 'vuex';

    export default ({
        components: {
            application_navigation,
            application_sidebar
        },

        data: {
            menu: this.$store.global.state.sidebar
        }
    });
</script>

내 상태에 액세스하여 올바르게 방출하는 방법을 배우려고 합니다. 그러면 내비게이션 구성 요소에서 위로 방출할 수 있습니다. 그러면 값이 반영되어 사이드바를 열거나 닫을 수 있습니다.

어떤 도움이라도 주시면 감사하겠습니다. 저는 Vue에 대해 잘 모르거든요.

내 생각에 가장 큰 문제는 모듈 상태로 가는 경로가this.$store.state.site.

계산된 속성을 사용하는 것이 좋습니다.예를들면

computed: {
  menu() {
    return this.$store.state.site.sidebar
  }
}

도우미를 사용할 수도 있습니다.

import { mapState } from 'vuex'

export default {
  computed: mapState({ menu: state => state.site.sidebar })
}

그this변수를 통해 스토어에 액세스하려고 할 때 Vue 인스턴스를 참조하지 않습니다.this.$store.

그dataobject는 객체를 반환하는 메서드여야 합니다.

data() {
  return { menu: this.$store.state.site.sidebar };
}

단, 스토어에서 값을 검색하여state이의를 제기하다data이와 같은 방법, 당신은 단지 의 값만 설정하고 있습니다.menuVue 인스턴스가 초기화될 때 데이터 속성.가치menu 스토어의 값 변경에 따라 업데이트되지 않습니다.state.

필요한 경우menu을 반영하는 가치stateVue 인스턴스의 전체 수명 동안 계산된 속성을 사용해야 합니다.mapState@Phil의 답변에서 제시된 바와 같이.

언급URL : https://stackoverflow.com/questions/49058821/vuex-data-store-not-found-in-components