Uncaught TypeError: this. $ Store.commit ist keine Funktion

Question

Ich habe eine Vue-Methode, die Daten an eine Vuex-Mutation übergeben will, aus irgendeinem Grund bekomme ich immer Uncaught TypeError: this. $ Store.commit ist kein a Funktion

Der Fehler löst aus, wenn ich auf das Listenelement klicke und die Funktion aufruft.

---

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(); 
    }, 
}; 

Dies ist die store.js Datei, wo ich die Mutation erklären.

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, das ist, wo ich die Vue App

erklären

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

Dies ist die Seite arbeite ich an, wo ich alle Komponenten zu laden:

<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

Sie sind nicht Erstellen eines Vuex Geschäft. Alles, was Sie haben, ist ein Objekt, das die Speichereigenschaften definiert.

ändern store.js

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

Siehe https://vuex.vuejs.org/en/getting-started.html#the-simplest-store