Vuex、Nuxt：未知的操作类型

Question

我正在使用 nuxt + vuex 构建一个简单的应用程序。提交/调度时，我不断收到错误“未知操作/突变类型：名称”。另外，我的突变和操作不会显示在 vue devtools 中。另一方面，吸气剂和状态显示应有的样子。

商店/产品.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>

我尝试过的

1. 通过箭头函数编写动作/突变如下

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

2. 在index.js中编写动作/突变

3. 从docs复制示例。状态正在发挥作用，而突变却不起作用。

上述所有要点都不起作用。有任何想法吗？

Answer 1

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 总是被 nuxt.js 禁用