Vuex：为什么我的突变提交调用失败？答案

【问题标题】：Vuex: why does my mutation commit call fail?Vuex：为什么我的突变提交调用失败？
【发布时间】：2019-03-02 14:42:36
【问题描述】：

我的按钮触发了一个调用突变的store commit。超级简单的代码，但我得到“无法读取未定义的属性'提交'”。我做错了什么？

注意：我的商店信息包含在一个单独的文件中，但如果我不这样做，我还是会遇到同样的问题。

组件/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)
})

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

您需要在根组件中提供store 选项以将存储“注入”到所有子组件中，请参阅getting-vuex-state-into-vue-components；在main.js：

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

【讨论】：