Property or method not defined on the instance but referenced during render I Vuex

12,863

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'

   export default {
    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")
  }
}
Share:
12,863

Related videos on Youtube

Konrad Viltersten
Author by

Konrad Viltersten

A self taught code monkey since the age of 10 when I got my first computer, the coolest Atari 65XE. Later on, a mathematics and computer science student at a university with a lot of side-studies in philosophy, history, Japanese etc. Today, a passionate developer with focus on web related technology from UX, through JS/TS to C# with a touch of SQL. Motto: A lousy programmer knows how to create problems. A good programmer knows how to solve problems. A great programmer knows how to avoid them. (Get the double meaning?) Works at: http://kentor.se Blogs at: http://konradviltersten.wordpress.com Lives at: http://viltersten.somee.com

Updated on September 16, 2022

Comments

  • Konrad Viltersten
    Konrad Viltersten about 1 year

    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 properties in the data option.

    As far I can tell by the code, the method is there, so I'm stuck on something that I miss due to my ignorance of Vuex. I've googled the matter and got quite a few answers but none of them made me any wiser what to do. It seems to be something with scope, I'm sensing.

    I also get the error below but I suspect that it's the same root cause for both so solving the one will resolve the other.

    [Vue warn]: Invalid handler for event "click": got undefined (found in component at ...)

    The markup is as follow. I've checked that the path goes to the right location. At the moment I'm not sure at all how to even start to troubleshoot it. Any hints 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 methods property like so. (Still the same error remaining, though.)

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

    Do I have 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 });
    
  • Konrad Viltersten
    Konrad Viltersten almost 7 years
    Where's the part with $store coming from? Is it an internal utility field of Vue? I don't recognize the name from other contexts and it looks to me like a jQuery style variable (almost)...
  • Saurabh
    Saurabh almost 7 years
    @KonradViltersten this.$store is your vuex store for this vue component, using this you can access vuex store or trigger mutations or dispatch actions. You can see its example uses here.
  • Konrad Viltersten
    Konrad Viltersten almost 7 years
    I've found it, thanks. The problem is that the three dots ("...") doesn't work. I've read up on it but at the moment, it's a bit too many loose parts for me to feel convenient. How could I rewrite methods: ... part with old style of JS? I'll try to figure out how to configure webpack to work the spread operator later, I hope.
  • Joe Clay
    Joe Clay almost 7 years
    @KonradViltersten: In your version, you've nested methods inside your vuex object - it needs to be one level higher, as it is in saurabh's example.