A property or method that is not defined in the instance, but referenced during rendering by Vuex

Question

I get the following error.

[Vue warn]: The property or method "updateData" is not defined in the instance, but is specified during rendering. Be sure to declare the properties of the reactive data in the data parameter.

As far as I can tell by code, the method exists, so I'm stuck on something that I am missing due to my ignorance of Vuex. I was looking for this question and got a lot of answers, but none of them made me wiser what to do. I feel that this is something of a sphere.

I also get the error below, but I suspect that this is the same root cause for both, so solving one will allow the other.

[Vue warn]: Invalid click event handler: received undefined (found in component in ...)

The markup is as follows. I checked that the path goes to the right place. At the moment, I'm not at all sure how to even start troubleshooting. Any clues would be appreciated.

<template> <div id="nav-bar"> <ul> <li @click="updateData">Update</li> <li @click="resetData">Reset</li> </ul> </div> </template> <script> import { updateData, resetData } from "../vuex_app/actions"; export default { vuex: { getters: { activeDataRow: state => state.activeDataRow }, actions: { updateData, resetData } } } </script> 

Edit

After input, I improved the export to include a method property like this. (However, the same error remains).

 export default { vuex: { getters: { activeDataRow: state => state.activeDataRow }, actions: { updateData, resetData }, methods:{ updateData: () => this.$store.dispatch("updateData"), resetData: () => this.$store.dispatch("resetData") } } } 

Do I need to do something extra in the store? It looks like this.

 import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const state = { dataRows: [], activeDataRow: {} }; const mutations = { UPDATE_DATA(state, data) { state.dataRows = data; state.activeDataRow = {}; }, RESET_DATA(state) { state.dataRows = []; state.activeDataRow = {}; } }; export default new Vuex.Store({ state, mutations }); 

Answer 1

You need to add the imported functions to the methods of the Vue component, for example, the following. You can use mapActions as described in the documentation . This is necessary to display this.updateDate in this.$store.dispatch('updateDate') .

 <script> import { updateData, resetData } from "../vuex_app/actions"; import { mapActions } from 'vuex' export default { vuex: { getters: { activeDataRow: state => state.activeDataRow }, actions: { updateData, resetData } }, methods: { ...mapActions(['updateData', 'resetData']) } } </script> 

Edited

If you do not want to use mapActions , you can use this.$store.dispatch , as you use in your example, however you need to have methods at the vue compoenent level ( documentation ), and not insise vuex, as shown below:

 export default { vuex: { getters: { activeDataRow: state => state.activeDataRow }, actions: { updateData, resetData } }, methods:{ updateData: () => this.$store.dispatch("updateData"), resetData: () => this.$store.dispatch("resetData") } }