【vuex】unknown action type:home/categoryList报错

60 阅读 0 评论 40 点赞

我是靠谱客的博主糊涂康乃馨，最近开发中收集的这篇文章主要介绍【vuex】unknown action type:home/categoryList报错，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

记录一下今天遇到的bug。在做项目时，想进行vuex模块化开发。

在src/store下暂且建了两个小仓库home和search

src/store/index.js

import {createStore} from 'vuex';
// 引入小仓库
import home from '@/store/home/index'
import search from '@/store/search/index'


// 对外暴露store类的一个实例
export default createStore({
    // 实现vuex仓库模块式开发存储数据
    modules:{
        home,
        search,
    }
});

其中src/store/home/index.js小仓库中的代码如下：

// home模块的小仓库
import {createStore} from 'vuex';
import {reqCategoryList} from '@/api';

const state = {
    categoryList:[],
};
const mutations = {
    CATEGORYLIST(state,categoryList){
        state.categoryList = categoryList;
    },
};
const actions = {
    // 通过API里面的接口函数调用，向服务器发请求，获取服务器的数据
    async categoryList({commit}){
        console.log('123');
        let result = await reqCategoryList();
        if(result.code == 200){
            commit("CATEGORYLIST",result.data);
        }
    }
};
const getters = {};

export default createStore({
    namespaced: true,
    state,
    mutations,
    actions,
    getters
});

在我的Nav导航组件中进行值传递

<script>
import { useStore } from "vuex";
import { onMounted } from "vue";

export default {
  name: "TypeNav",
  setup() {
    const store = useStore();
    // 组件挂载完毕，可以向服务器发请求
    onMounted(() => {
      // 通知vuex发请求，获取数据，存储于仓库中
      store.dispatch("home/categoryList");
      // console.log(store);
    });
  },
};
</script>

结果，它就报错了。

于是就开始了艰难的找bug之路。

一开始并没有开启命名空间，没有namespaced:true，dispatch时只是categoryList。也是unknown action type。所以我搜了一些帖子说是可以加命名空间（我不知道我这么加对不对）。但是没有用，还是报错。

找了很多的帖子，但都不是很有用，基本都是一摸一样的操作和说法。

所以就去了官方文档查看。Module | Vuex

文档中建议只需要对外暴露一个module对象即可，不需要用到createStore。

所以我根据文档改了一下代码，src/store/home/index.js如下：

// home模块的小仓库
import {reqCategoryList} from '@/api';

const home = {
    state: {
        categoryList:[],
    },
    mutations: {
        CATEGORYLIST(state,categoryList){
            state.categoryList = categoryList;
        },
    },
    actions: {
        // 通过API里面的接口函数调用，向服务器发请求，获取服务器的数据
        async categoryList({commit}){
            let result = await reqCategoryList();
            console.log(result);
            if(result.code == 200){
                commit("CATEGORYLIST",result.data);
            }
        }
    },
    getters: {},
}
export default home;

并且我派遣的时候没再用命名空间，没加上home/

export default {
  name: "TypeNav",
  setup() {
    const store = useStore();
    // 组件挂载完毕，可以向服务器发请求
    onMounted(() => {
      console.log(store.state);
      // 通知vuex发请求，获取数据，存储于仓库中
      store.dispatch("categoryList");
      console.log(store);
    });
  },
};
</script>

然后就ok了！

我输出了module的state 以及 actions中获取的服务器数据