How To Design A Store In Vuex To Handle Clicks In Nested, Custom Components?

I'm trying to design a store to manage the events of my Vuex application. This far, I have the following. import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const stat

Solution 1:

Why the error

You are getting the error, because when you have <li @click="updateData"> in the template, it looks for a method updateData in the vue component which it does not find, so it throws the error. To resolve this, you need to add corresponding methods in the vue component like following:

<script>import { updateData } from"../vuex_app/actions";
  exportdefault {
    vuex: {
      getters: { activeDataRow: state => state.activeDataRow }, 
      actions: { updateData }
    }, 
    methods:{ 
      updateData: () =>this.$store.dispatch("updateData")    
    }
  }
</script>

What this.$store.dispatch("updateData") is doing is calling your vuex actions as documented here.

What/where's the "data option"

You don't have any data properties defined, data properties for a vue component can be used, if you want to use that only in that component. If you have data which needs to be accessed across multiple components, you can use vuex state as I believe you are doing.

Following is the way to have data properties for a vue component:

<script>import { updateData } from"../vuex_app/actions";
  exportdefault {
    date: {
      return {
        data1 : 'data 1',
        data2 : {
            nesteddata: 'data 2' 
          }
      }
    }
    vuex: {
      getters: { activeDataRow: state => state.activeDataRow }, 
      actions: { updateData }
    }, 
    methods:{ 
      updateData: () =>this.$store.dispatch("updateData")    
    }
  }
</script>

You can use these data properties in the views, have computed properies based on it, or create watchers on it and many more.