未捕获的类型错误:this.$store.commit 不是函数 [英] Uncaught TypeError: this.$store.commit is not a function
问题描述
我有一个 vue 方法想要将数据提交到 vuex 突变，出于某种原因，我不断收到 Uncaught TypeError: this.$store.commit is not a function
当我单击列表项并调用该函数时会触发错误.
<小时>sample.vue
<li class="tabs-title" v-for="item in filtersItems" v-on:click="upComponents" :key="item.initials" >导出默认{数据() {返回 {搜索:空，};},计算:{过滤项目(){const 硬币 = this.$store.state.coin.coin;if (!this.search) 返回硬币；const searchValue = this.search.toLowerCase();const 过滤器 = 硬币 =>coin.initials.toLowerCase().includes(searchValue) ||coin.name.toLowerCase().includes(searchValue);返回硬币.过滤器(过滤器)；},},方法: {upComponents(项目){this.$store.commit('updatedComp', item);},},安装(){this.tabs = new Foundation.Tabs($('#exchange-tabs'), {匹配高度:假，});},销毁(){this.tabs.destroy();},};这是我在其中声明突变的 store.js 文件.
从'vue'导入Vue；从 'vuex' 导入 Vuex；从'../data/system.json'导入硬币；Vue.use(Vuex);导出默认{状态: {硬币，selectedCoin: 'jgjhg',},突变:{更新的Comp(状态，新ID){state.selectedCoin.push(newID);},},吸气剂:{硬币:状态 =>状态币，},};main.js，这是我声明 Vue 应用程序的地方
从'jquery'导入jQuery；从'vue'导入Vue；从'./App'导入应用程序；从'./router'导入路由器；从 './store/store' 导入商店；window.jQuery = jQuery;窗口.$ = jQuery;要求('运动-ui')；要求('什么输入');require('基础站点');新的 Vue({el: '#app',店铺，路由器，模板:'<App/>',组件:{应用}，});这是我正在处理的页面，我在其中加载了所有组件:
<div class="grid-container"><div class="grid-x"><div ><headline-exchange></headline-exchange>...</模板><脚本>从'./molecules/Headline'导入标题；导出默认{成分: {'headline-exchange': 标题,},};
您不是创建 Vuex 商店.您所拥有的只是一个定义商店属性的对象.
将您的 store.js 更改为
export default new Vuex.Store({状态: { ... }，突变:{ ... }，//等等})参见 https://vuex.vuejs.org/guide/#the-simplest-存储
I have a vue method that wants to commit data to a vuex mutation, for some reason I keep getting Uncaught TypeError: this.$store.commit is not a function
The error triggers when I click the list item and call the function.
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();
},
};
This is the store.js file where I declare the mutation.
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, this is where I declare the Vue app
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 },
});
This is the page I'm working on, where I load all the components:
<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>
You are not creating a Vuex store. All you have is an object defining the store properties.
Change your store.js to be
export default new Vuex.Store({
state: { ... },
mutations: { ... },
// etc
})
See https://vuex.vuejs.org/guide/#the-simplest-store
这篇关于未捕获的类型错误:this.$store.commit 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
