Property Or Method Not Defined On The Instance But Referenced During Render I Vuex

I'm getting the following error. [Vue warn]: Property or method 'updateData' is not defined on the instance but referenced during render. Make sure to declare reactive data proper

Solution 1:

You have to add the imported functions in the methods of Vue component, like following. You can take help of mapActions as explained in the documentation. This is needed to map this.updateDate to this.$store.dispatch('updateDate').

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

Edited

In case you dont want to use mapActions, you can use this.$store.dispatch as you are using in your example, however you need to have methods at vue compoenent level (documentation) and not insise vuex, as following:

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