[Vuejs]-VueX actions not mapping. Message – [TypeError: Cannot read property 'dispatch' of undefined]

0πŸ‘

βœ…

The code works fine after adding the missing code:

import Vue from 'vue';
Vue.use(Vuex);

index.js ..\store

import Vue from 'vue';  // added now
import Vuex from 'vuex';
import axios from 'axios';

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';

Vue.use(Vuex); // added now
export default new Vuex.Store({
  state: {
        products: [],
        products_images: [],
    },
    mutations: {
        loadProducts: (state, {products, products_images}) => {
            state.products = products;
            state.products_images = products_images;
        },
    },
    actions: {
        retrieveProducts: () => {
            alert("I NEED TO EXECUTE CODE HERE"); // **FAILS HERE (Step-3)**
        },
    },
    getters: {
    }
});

0πŸ‘

You need to install the Vuex plugin with Vue.use(Vuex).

Leave a comment