this.$store는 다음 예시 응용 프로그램 구조에서 정의되지 않음

this.$store는 다음 예시 응용 프로그램 구조에서 정의되지 않음

애플리케이션 구조 설명서에 나와 있는 대로 Vuex를 사용하려고 한다.하지만 Vue dev 도구에는 $store가 표시되지 않고 내 코드에 정의되지 않은 상태로 반환되고 있다.나는 장바구니 예시를 참고용으로 사용해 왔다.

import Vue from 'vue/dist/vue';
import store from './store';
import router from './router';

const app = new Vue({
  el: '#app',

  store,
  router,

  computed: {
    loading() {
      return this.$store.state.application.loading.active;
    }
  }
});

store/index.js(예: 레이아웃에 따라)에서 다음 작업을 수행하십시오.

import Vue from 'vue';
import Vuex from 'vuex';

import application from './modules/application';

Vue.use(Vuex);

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

그리고 마지막으로 저장/모듈/응용프로그램에 들어간다.js:

const state = {
  loading: {
    active: true,
    message: ''
  },
  syncing: {
    active: false,
    message: ''
  }
}

const getters = {
  //
}

const actions = {
  //
}

const mutations = {
  /**
   * Update Loading
   * 
   * @param {*} state 
   * @param {string} appState
   * @param {boolean} active 
   * @param {string} message 
   */
  updateAppState(state, appState = false, active = false, message = '') {
    if (Object.keys(state).includes(appState)) {
      state.appState = {
        active: active,
        message: message
      }
    }
  }
}

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

참고 유사한 매너에서 라우터 인스턴스를 가져올 때 라우터/index.js:

import Vue from 'vue/dist/vue';
import VueRouter from 'vue-router';

import ContentDefault from '../components/main/ContentDefault';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      // Default view
      path: '/',
      components: {
        default: ContentDefault
      },
    }
  ]
});

편집: 측면 문제, 액세스할 수 없음$store하위 구성 요소에서, 그것은 내가 메인 앱과 상점 파일의 다른 버전의 Vue를 가져오기 때문이었습니다.vue대신에vue/dist/vue

당신은 당신의 앱 콘스톨에 달러가 필요하지 않다.그리고 방금 수입한 매장이기 때문에 직접 사용할 수 있어.

다음을 시도해 보십시오.

import Vue from 'vue/dist/vue';
import store from './store';
import router from './router';

const app = new Vue({
  el: '#app',

  store,
  router,

  computed: {
    loading() {
      return store.state.application.loading.active;
    }
  }
});

참조URL: https://stackoverflow.com/questions/52852777/this-store-is-undefined-following-example-application-structure