TypeError: this.$store is undefined

user_13847861 0
Viewed 158

I'm following a Vue 2 tutorial but got stuck by this error. I've checked multiple questions before posting this one because I'm still unsure of what did I do wrong. Any input will be appreciated!

App.vue code:

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <TodoApp />
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import TodoApp from './components/TodoApp.vue';

export default {
  name: 'App',
  components: {
    // HelloWorld,
    TodoApp
}
}
</script>
  body {
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    line-height: 1.6;
    background: #e8f7f0;
  }
  .container {
    max-width: 1100px;
    margin: auto;
    overflow: auto;
    padding: 0 2rem;
  }
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Store (index.js) code:

import Vuex from 'vuex';
import Vue from 'vue';
import TodoModule from './modules/TodoModule.js';

// Load vuex
Vue.use(Vuex);

// Create store
export default new Vuex.Store({
    modules: {
        TodoModule
    }
});

Main.js code:

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

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

TodoApp.vue code:

<template>
  <div>
    <h3>Vuex Todo App</h3>
    <div class="todos">
      <div class="todo" v-for="todo in allTodos" :key="todo.id">
        {{ todo.title }}
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: "TodoApp",
  computed: mapGetters(['allTodos'])
};
</script>

<style>

</style>

TodoModule.js code:

// import axios from "axios";

const state = {
    todos: [
        {
            id: 1,
            title: "first todo"
        },
        {
        id: 2,
        title: "second todo"
    },
    {
        id: 3,
        title: "third todo"
    }
]
};

const getters = {
    allTodos: state => state.todos
};

const actions = {};

const mutations = {};

export default {
    state,
    getters,
    actions,
    mutations
}

No Error on Compiler:

No Error on Compiler

Error on Browser Console:

Error on Browser Console

=== UPDATE ===

I still haven't fix this issue and I have tried restarting the localhost server, even my own laptop to check if it'll fix it.. no luck there. From what I've read from answers, is it possible that this error happen because of my vue installation? Or perhaps I forgot to install something else when starting the development?

=== UPDATE 2 === Found the culprit, apparently my vue and vuex npm package either got corrupted or has a conflict, changing the version of vue to 2.7.8 and vuex to 3.0.1 then rerun npm i (after deleting the node_modules and package-lock.json) has fixed the issue! Thanks for all the help!

vuejs2 vue.js
4 Answers

Your code seems ok.

I could reproduce with no erros using TodoModule below.

const TodoModule = {
  state: {
    todos: [{ title: "1" }, { title: "2" }, { title: "3" }, { title: "4" }]
  },

  getters: {
    allTodos: (state) => state.todos
  }
};

export default TodoModule;

If error continues, you could check the naming on your files. The store index.js as you said should be named as store.js.

Or perhaps restart server.

user_197465270

I think I might have actually done the same youtube tutorial on vuex state management but I didn't use the mapGetter helper function, instead, I used the vanilla functions of vuex for getting and setting global variables.

main.js

store: new vuex.Store({
state: {
  user: {}
},
mutations: {
  setUser(state, payload){
    state.user = payload;
  }
},
getters: {
  getUser: state => state.user,
}})

any-component.js

this.user = this.$store.getters.getUser; //get
this.$store.commit("setUser", this.user); //set
user_66304270

I think you should change getter inTo

export default {
  name: "TodoApp",
  computed: mapGetters(['allTodos'])
};

===>

export default {
  name: "TodoApp",
  computed: {
    ...mapGetters(['allTodos'])
    }
};
user_197479420

I got the same problem while using Vue 2.

npm uninstall vuex

then

npm i vuex@3.0.1

npm install vuex by default npm installs version 4 which is not supported by Vue 2

https://github.com/vuejs/vuex/releases

user_156583330
Related