Cfrgtkky

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';

2. in main.js:

use store: store, rather than store,

3. in store.js:

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

4. 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

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




6. 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.

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>