Vuex: почему мой вызов фиксации мутации не удался?

Question

Моя кнопка вызывает store commit, который вызывает мутацию.Супер простой код, но я получаю "не могу прочитать свойство 'commit' из undefined".Что я делаю не так?

Примечание: информация о моем магазине содержится в отдельном файле, но я все равно получаю ту же проблему, когда не делаю этого.

компоненты /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, содержащий информацию о магазине:

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)
})

Answer 1

Вам необходимо предоставить опцию store в корневом компоненте, чтобы "внедрить" хранилище во все дочерние компоненты, см. getting-vuex-state-into-vue-components ;В main.js:

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