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

标签 javascript vue.js vuejs2 vuex

我有一个想要将数据提交到 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>

最佳答案

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

更改您的 store.js成为

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

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

关于javascript - 未捕获的 TypeError : this. $store.commit 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46416012/

相关文章:

javascript - 在 react 中将多个日期分割为特定格式

node.js - 在expressjs服务器和vuejs客户端之间使用快速 session

express - Vue + Express(NestJS) 不可能完成的任务,您正在使用 Vue 的仅运行时版本,其中

ajax - 获取组件在渲染之前等待异步数据

javascript - PHP foreach 循环上的 jQuery 切换

javascript - 需要帮助来确定自定义工具提示的配置(chartjs)

javascript - 带有 vue-form-wizard 的 Vue CLI Webpack 模板未转换为 es5

javascript - 如何在 Vue.js 中按标题创建搜索过滤器?

node.js - 如何使用 Node + Express 使用 Vuejs 渲染索引页面

javascript - 给定二叉搜索树和两个节点 n1 和 n2,编写一个函数来计算两个节点之间的距离