lopezi lopezi - 24 days ago 8
Javascript Question

Uncaught TypeError: this.$store.commit is not a function

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.


<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) ||

return coins.filter(filter);

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

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

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';


export default {
state: {
selectedCoin: 'jgjhg',
mutations: {
updatedComp(state, 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;


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

This is the page I'm working on, where I load all the components:

<div class="grid-container">
<div class="grid-x">
<div >

import Headline from './molecules/Headline';

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


Answer Source

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