Не удается получить доступ к этому. $ Store (vuex) в любом дочернем компоненте после базовой установки

Question

Так что я совершенно новичок в vuex. Я осторожно устанавливаю vuex в свое приложение vue, но не могу получить доступ к хранилищу this. $ В любом из моих дочерних компонентов.

Я также прочитал более 10 вопросов, задавая одно и то же, и я сделал много изменений, пробовал много раз. Так как я думал, что все сделал правильно, и это все еще не работает. Я наконец решил приехать сюда и спросить. Я поставлю свои собственные коды ниже:

структура файла (только связанные файлы):

|---main.js
|---store.js
|---App.vue
|---components

main.js:

import '@babel/polyfill'
import Vue from 'vue'

import App from './App.vue'

import './plugins/vuetify'
import './plugins/vue-resource'
import { store } from './store';

require('../node_modules/ol/ol.css');

Vue.config.productionTip = false

fetch('static/App_Config.json')
  .then(function (response) {
    return response.json().then(function (AppConfig) {
      Vue.prototype.$AppConfig = AppConfig;

      new Vue({
        store,
        render: h => h(App)
      }).$mount('#app')

    });
  })

store.js:

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

Vue.use(Vuex, {
});

export const store = new Vuex.Store({
    state: {
        testText: "test string"
    }
});

в компонентах: (упрощенно, только связанные коды)

<script>
    created () {
        console.log("this.$store_test: ", this.$store);
    }
</script>

---

Я уже попробовал эти возможности:

1. в main.js:

используйте import store from './store'; вместо import { store } from './store';

2. в main.js:

используйте store: store вместо store,

3. в store.js:

используйте Vue.use(Vuex); вместо Vue.use(Vuex, {});

4. в store.js: (в сочетании с 1. Я перепробовал все 4 комбинации)

используйте export default store = new Vuex.Store вместо export const store = new Vuex.Store

5. поместил консоль не в созданный хук, а в методы и сделал кнопку для ее запуска.

6. поместить консоль в другие дочерние компоненты, вложенные в разные глубины

После того, как я выполнил много похожих предложений и много пробовал (также с 20+ перезапусками сервера времени) Я все еще могу получить это. $ Store. Мне нужна помощь.

Я НЕ ДУМАЮ, что этот вопрос дублирует, потому что я уже прочитал другие вопросы и попробовал все возможные варианты. Если они все потерпели неудачу, это должно быть что-то новое с моими кодами.

Answer 1

Это действительный файл Vuex store.js:

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        testText: "test string";
    }
});

export default store;

Не забудьте создать getter, mutation и action для ваших переменных в Vuex, вы должны не обрабатывают состояние напрямую.

В main.js не имеет значения, если вы используете store или store: store, они идентичны.

import store from './store' совпадает сimport { store } from './store'.

Vue.use(Vuex) и Vue.use(Vuex, {}) одинаковы, если вы не предоставите никаких опций.

Вам не нужно где-то хранить хранилище в компонентевы загружаете Vuex до монтирования приложения, так что вы можете начать использовать его, например, в main.js созданном хуке.

Ваш компонент <script> тег неверен.Вы должны использовать export default, например:

<script>
export default {
    created () {
        // Check if console.log like this works better as well
        console.log("Store test:");
        console.log(this.$store);
    }
}
</script>