Vuex 未知动作类型：getProducts答案

【问题标题】：Vuex unknown action type: getProductsVuex 未知动作类型：getProducts
【发布时间】：2021-08-05 15:38:08
【问题描述】：

我正在尝试使用带有 Vuex 的 Axios API 来显示产品列表。

我创建并安装了 Vuex，在我创建 index.js 和 actions.js、mutations.js、getters.js 和 state.js 的 store 目录中。

在我的 Vue.js 组件中，当我使用调度调用操作时，我收到此错误：

[vuex] 未知动作类型：getProducts

这是我的代码：

Productlist.vue 组件：

<template>
<div class="d-flex align-items-stretch flex-wrap">
    <ProductCard v-for="product in products" :key="product.id" :product="product"/>  
</div>
</template>
<script>
import ProductCard from './ProductCard.vue'
export default {
   components: {
        ProductCard
    },
    computed: {
        products() {
            console.log(this.$store.state.products)
            return this.$store.state.products
        }
    },
    mounted(){
        this.$store.dispatch('getProducts');
    }
}
</script>
<style lang="">
</style>

我的商店（index.js）：

import Vue from 'vue'

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

import state from './state';
import getters from './getters';
import mutations from './mutations'
import actions from './actions'

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions,   

});

state.js：

export default{
    products: []
}

actions.js：

import axios from "axios";
const getProducts = ({ commit }) => {
    alert('okkk')
    axios.get('http://127.0.0.1:8000/api/products')
    .then(response => {
        console.log ('data is', response.dat )
        commit('SET_PRODUCTS', response.data);
    })
}

export default getProducts

mutations.js：

const SET_PRODUCTS = (state, products) => {
    state.products = products;
}
export default SET_PRODUCTS

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案1】：

getProducts 是默认导出，getProducts 名称下 Vuex 无法识别。此处无法进行多个操作。

应该是：

import * as actions from './actions'

和

export const getProducts = ...

这同样适用于突变和吸气剂。

【讨论】：