TypeError: this.$store is undefined-CodePudding

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 >
      <div  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:

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!

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

I think you should change getter inTo

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

===>

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