0


【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中获取的服务器数据

如果有同样问题的,可以尝试用这种方法改,后续我再尝试一下要加命名空间的话要怎么写代码。

如果有帮助的话,可以点赞收藏哟,感谢~


本文转载自: https://blog.csdn.net/m0_56698268/article/details/126460933
版权归原作者 Eric加油学! 所有, 如有侵权,请联系我们删除。

“【vuex】unknown action type:home/categoryList报错”的评论:

还没有评论