Can't access this.$store (vuex) in any child component after basic installation

user_8856114 0
Viewed 1785

So I am totally new to vuex. I carefully install the vuex to my vue app but I can't acess the this.$store in any of my child component.

I have also read more than 10 questions ask the same thing and I did a lot of changes, tried lots of times. Since I thought I did everything right and it still doesn't work. I finally decide to come here and ask. I will put my own codes below:

file structure (only related files):

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

in components: (simplified, only related codes)

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

I have already tried these possibilties:

  1. in main.js:

use import store from './store'; rather than import { store } from './store';

  1. in main.js:

use store: store, rather than store,

  1. in store.js:

use Vue.use(Vuex); rather than Vue.use(Vuex, {});

  1. in store.js: (combined with 1. I have tried all 4 combinitions)

use export default store = new Vuex.Store rather than export const store = new Vuex.Store

  1. put the console not in created hook, but in methods, and made a button to trigger it.

  2. put the console in other child components, which nested in different deeps

After I serched a lot similar qustions and tried a lot (also with 20+ time server restart). I still can get this.$store. I kind of need some help.

I DO NOT think this question is duplicate, because I have already read other questions and tried all the possiblities. If they all failed, it must be something new here with mine codes.

vuejs2 vuex vue.js
1 Answers

This is a valid Vuex store.js file:

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

Vue.use(Vuex);

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

export default store;

Remember to create a getter, mutation and action for your variables in Vuex, you should not handle the state directly.

It doesn't matter in main.js if you use store or store: store, they are identical.

import store from './store' is the same as import { store } from './store'.

Vue.use(Vuex) and Vue.use(Vuex, {}) are the same as long as you don't supply any options.

You don't need to get the store in a component somewhere, you're loading Vuex before the app is mounted, so you can actually start using it in e.g. the main.js created hook.

Your components <script> tag is incorrect. You should use export default, like this:

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