javascript - 未捕获的 TypeError : this. $store.commit 不是函数

Question

我有一个想要将数据提交到 vuex 突变的 vue 方法，由于某种原因，我不断收到 Uncaught TypeError: this.$store.commit is not a function

当我单击列表项并调用该函数时会触发错误。

示例.vue

<li class="tabs-title" v-for="item in filteredItems" v-on:click="upComponents" :key="item.initials" >

export default {
  data() {
    return {
      search: null,
    };
  },
  computed: {
    filteredItems() {
      const coins = this.$store.state.coin.coin;
      if (!this.search) return coins;

      const searchValue = this.search.toLowerCase();
      const filter = coin => coin.initials.toLowerCase().includes(searchValue) ||
          coin.name.toLowerCase().includes(searchValue);

      return coins.filter(filter);
    },
  },

  methods: {
    upComponents(item) {
      this.$store.commit('updatedComp', item);
    },
  },

  mounted() {
    this.tabs = new Foundation.Tabs($('#exchange-tabs'), {
      matchHeight: false,
    });
  },
  destroyed() {
     this.tabs.destroy();
  },
};

这是我声明突变的 store.js 文件。

import Vue from 'vue';
import Vuex from 'vuex';
import coin from '../data/system.json';

Vue.use(Vuex);

export default {
  state: {
   coin,
   selectedCoin: 'jgjhg',
  },
  mutations: {
    updatedComp(state, newID) {
     state.selectedCoin.push(newID);
    },
  },
  getters: {
    coin: state => state.coin,
  },
};

main.js，这是我声明 Vue 应用程序的地方

import jQuery from 'jquery';
import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store/store';


window.jQuery = jQuery;
window.$ = jQuery;

require('motion-ui');
require('what-input');
require('foundation-sites');


new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App },
});

这是我正在处理的页面，我在其中加载所有组件:

<template>
  <div class="grid-container">
    <div class="grid-x">
      <div >
       <headline-exchange></headline-exchange>
       ...
      </div>
    </div>
  </div>
</template>



<script>
import Headline from './molecules/Headline';

export default {
  components: {
   'headline-exchange': Headline,
  },
};

</script>

Answer 1

你是 不是 创建 Vuex店铺。您所拥有的只是一个定义商店属性的对象。

更改您的 store.js成为

export default new Vuex.Store({
  state: { ... },
  mutations: { ... }, 
  // etc
})

见 https://vuex.vuejs.org/guide/#the-simplest-store