遺漏的類型錯誤：這$ store.commit不是一個函數

Question

我有希望將數據提交到vuex突變的VUE方法，由於某種原因，我不斷收到遺漏的類型錯誤：這$ store.commit不是功能

的錯誤，當我點擊列表項，調用函數觸發。

---

sample.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/en/getting-started.html#the-simplest-store