this. $ store не определен в следующем примере структуры приложения

Question

Я пытаюсь использовать Vuex, как показано в структуре приложения документации.Тем не менее, $ store не отображается в инструментах разработки Vue и возвращает undefined в моем коде.Я использовал пример Корзина в качестве ссылки.

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
  }
});

И, наконец, в 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
}

Обратите внимание, что я импортирую свой экземпляр маршрутизатора в похожую усадьбу, и он работает, router / 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

Answer 1

Вам не нужно $ в вашем приложении const.А поскольку вы только что импортировали магазин, вы можете использовать его напрямую.

Попробуйте выполнить следующее:

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;
    }
  }
});