Vuex，Nuxt：未知的动作类型

Posted 2023-02-22

【中文标题】Vuex，Nuxt：未知的动作类型

【英文标题】：Vuex, Nuxt: Unknown action type

【发布时间】：2021-02-10 06:09:10

【问题描述】：

我正在使用 nuxt + vuex 构建一个简单的应用程序。提交/调度时，我经常收到错误“未知操作/突变类型：name”。我的突变和动作也不会显示在 vue devtools 中。另一方面，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>

我的尝试

通过箭头函数编写如下操作/突变

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

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

从docs 复制的示例。状态有效，突变无效。

上述所有要点均无效。有什么想法吗？

【参考方案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 always disabled with nuxt.js

【讨论】：

这行得通，但有没有办法不指定模块？同样在开发工具中，我仍然看不到突变和操作。

@Neistow 您可以通过分配property name来指定模块名称

这是 nuxt 的东西还是新的 vuex 功能？操作不需要在 vuex 中处理模块。