CODEWITHSUNDEEP
vue.jsvuex
drake035
drake035

Reputation: 2877

Vuex: why does my mutation commit call fail?

My button triggers a store commit that calls a mutation. Super simple code, yet I get "cannot read property 'commit' of undefined". What am I doing wrong?

Note: my store information is contained in a separate file, but I get the same issue anyway when I don't do that.

components/App.vue:

<template>
  <div id="app">
    <button @click="viewNextWeek">button</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      msg: "TimeLOG"
    }
  },
  methods: {
    viewNextWeek: function() {
      this.$store.commit('nextWeek');
    }
  }
}
</script>

<style></style>

src/store/index.js containing store information:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    today: new Date(),
  },
  mutations: {
    nextWeek() {
      alert('test');
    }
  }
});

src/main.js:

import Vue from 'vue';

import store from './store';

import App from './components/App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
})

Upvotes: 1

Views: 327

Answers (1)

akuiper
akuiper

Reputation: 214927

You need to provide the store option in the root component to "inject" the store into all child components, see getting-vuex-state-into-vue-components; In the main.js:

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

Upvotes: 2

Related Questions