VueX 动作没有映射。消息 - [TypeError：无法读取未定义的属性“调度”]答案

【问题标题】：VueX actions not mapping. Message - [TypeError: Cannot read property 'dispatch' of undefined]VueX 动作没有映射。消息 - [TypeError：无法读取未定义的属性“调度”]
【发布时间】：2020-03-10 17:45:16
【问题描述】：

在我的 Vue 代码中尝试运行 VueX 映射的操作时，我收到以下错误消息：

[TypeError: Cannot read property 'dispatch' of undefined]

我被困在 this.retrieveProducts();

我观察到的错误请参考下面的截图。

Screenshot of the error message

我正在使用 Django、Webpack 和 Vue-Cli3。

App.vue

<template>

  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/product-list">Products</router-link>
    </div>
  </div>

</template>

<style>

    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }

    #nav {
      padding: 30px;
    }

    #nav a {
      font-weight: bold;
      color: #2c3e50;
    }

    #nav a.router-link-exact-active {
      color: #42b983;
    }

</style>

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import { mapState, mapGetters, mapMutations,mapActions } from 'vuex';

Vue.config.productionTip = false;

new Vue({
    router,
    store,
    methods: {
    ...mapMutations([
        'loadProducts',
    ]),
    ...mapActions([
        'retrieveProducts', // **FAILS HERE (Step-2)**
        'saySomething',
    ]),

    testCall: () => {  // Works here
        alert('You are in removeLink');
    },

    },
    computed: {
        ...mapState([
            'products',
            'products_images',
        ]),
        ...mapGetters([
        ]),
    },
    mounted() {
        alert('mounting now');   // Works here
        this.testCall();         // Works here
        this.retrieveProducts(); // **FAILS HERE (Step-1)**
    },
    render: h => h(App),
    }).$mount('#app');

index.js ..\store

import Vuex from 'vuex';
import axios from 'axios';

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

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: {
    }
});

【问题讨论】：

你用Vue.use(Vuex)安装vuex插件了吗？
这解决了我的问题。我忘记添加 [ import Vue from 'vue'; ] 和 [ Vue.use(Vuex) ]。

标签： django vue.js webpack vuex

【解决方案1】：

您需要使用Vue.use(Vuex) 安装Vuex 插件。

【讨论】：

【解决方案2】：

添加缺少的代码后代码运行良好：

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: {
    }
});

【讨论】：