CODEWITHSUNDEEP
typescriptvue.jsvuejs2
Diego Alves
Diego Alves

Reputation: 2669

Vue.js and vuex: this.$store is undefined

I have already read the question with similar titles but I cannot follow them due to their complexity. I think with my code it will be easier to find a solution for me. I will only include the relevant code.

My store is this: obs: I installed the vuex plugin.

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


Vue.use(Vuex)

const state = {
    titulo: "please, change title"
}


const mutations = {
    changeTitle(state, title) {
        state.title= title
    }
}


export default new Vuex.Store({

    state : state,
    mutations : mutations
})

My App.vue

 <template>
    <div>
      <show-title-component ></show-title-component>
      <change-title-component></change-title-component>
    </div>
</template>

<script>


import ShowTitleComponent from './components/ShowtitleComponent';
import ChangeTitleComponent from './components/ChangeTitleComponent';
import store from './vuex/store';

export default {

components: {ShowTitleComponent, ChangeTitleComponent},
store,
data: function() {
  return {title: 'placeholder'}
}


}
</script>

The component that generates the error:

<template><div>{{ title}}</div></template>

<script>

export default {
    name: "show-title-component",
    computed: {
      title() {
        return this.$store.state.title   /** error   here */
      }
    }
}

</script>

Upvotes: 30

Views: 59500

Answers (5)

Ch Usman
Ch Usman

Reputation: 617

In Your main.js File

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import Vuex from 'vuex';
import {store}  from './store'  //use curly braces to around store. 

Vue.config.productionTip = false;

Vue.use(Vuex);

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

This worked for me.

Upvotes: 4

Volodymyr Symonenko
Volodymyr Symonenko

Reputation: 888

Maybe, you have not included the store inside the Vue instance

Your App entry point (app.js or main.js or index.js) must include this code:

import store from './store'

new Vue({
 ...
 store,
 ...
})

then you can use this.$store in any component

but I recommend the general architecture: https://vuex.vuejs.org/en/structure.html enter image description here

Upvotes: 25

uiroshan
uiroshan

Reputation: 5171

In my case, I was using modules. I could access mutations, actions and getters without any issue. But not the state. Solution is when using modules state should access with the namespace of the module.

Check the documentation for more information.

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
}

const store = new Vuex.Store({
    modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

By default, actions, mutations and getters inside modules are still registered under the global namespace

Upvotes: 2

朱晓鹏
朱晓鹏

Reputation: 21

1.Make sure you create it a store directory

2.npm i vuex -S

3.Make sure src／store/index.js have import Vuex from 'vuex' and Vue.use(Vuex)

4.Make sure src／main.js have import store from './store'

Upvotes: 1

Diego Alves
Diego Alves

Reputation: 2669

The store file should be Javascript (.js) file. Changing the file name and rebooting the server make the this.$tore error vanish.

The error was actually here :

App.vue

import store from './vuex/store';  /** in my case, it should be js file. */

Upvotes: 6

Related Questions