gpt4 book ai didi

javascript - Vuex, Nuxt : Unknown action type

转载 作者:行者123 更新时间:2023-12-04 12:23:40 26 4
gpt4 key购买 nike

我正在使用 nuxt + vuex 构建一个简单的应用程序。提交/调度时,我经常收到错误“未知操作/突变类型: 名称 ”。我的突变和 Action 也不会显示在 vue devtools 中。另一方面, setter/getter 和状态显示应该是。
商店/products.js:

import getProducts from "~/api/products";

export const state = () => ({
all: [{ isAvailable: false }, { isAvailable: true }],
});

export const getters = {
available(state) {
return state.all.filter((p) => p.isAvailable);
},
};

export const actions = {
async fetchProducts(context) {
const response = await getProducts(true);
const products = await response.json();
context.commit("setProducts", products);
},
};

export const mutations = {
setProducts(state, products) {
state.products = products;
},
};

页面/产品/index.vue
<template>
<div class="container"></div>
</template>

<script>
export default {
async created() {
await this.$store.dispatch("fetchProducts");
},
};
</script>

<style lang="scss" scoped></style>

我试过的
  • 通过箭头函数
  • 编写 Action /突变如下
    export const actions = {
    fetchProducts: async (context) => {
    const response = await getProducts(true);
    const products = await response.json();
    context.commit("setProducts", products);
    },
    };
  • 在 index.js 中编写 Action /突变
  • docs 复制的示例.状态有效,突变无效。

  • 上述所有要点均无效。有任何想法吗?

    最佳答案

    而不是 await this.$store.dispatch("fetchProducts") ,你能尝试做:


    await this.$store.dispatch("products/fetchProducts");

    由于 products 是一个 Vuex 模块,要在操作中访问它,您必须使用 module/actionName .
    关于 vue-devtools 中没有显示的模块,你能确定你的 nuxt.config.js有以下内容:
    export default {
    mode: 'spa',
    devtools: true //<--------- make sure this is set to true
    }

    请同时查看这个帖子,人们在其中解释他们自己使用不同版本的 Vue 的经验 - vue-devtools always disabled with nuxt.js

    关于javascript - Vuex, Nuxt : Unknown action type,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64563322/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com