Vuex 未知操作类型：getProducts

Question

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

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

在我的 Vue.js 组件中，当我使用 dispatch 调用操作时，出现此错误：

[vuex] unknown action type: 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

Answer 1

getProducts 是默认导出，Vuex 无法在 getProducts 名称下识别它。这里不能有一个以上的动作。

应该是：

import * as actions from './actions'

和

export const getProducts = ...

这同样适用于 mutations 和 getters。

Vuex 未知操作类型：getProducts

Vuex unknown action type: getProducts

vue.js

vuex

vuejs2