Question

尝试在Nuxt和打字稿中创建项目。但是文档非常差，我遇到了很多问题。某种方式可以解决其中的大多数问题，但在商店上存在一个问题。根据Nuxt文档，商店目录中的每个文件都将转换为模块。

为了更好地组织我的项目，我决定在 store 文件夹中添加一个子文件夹。但是，在进行此更改之后，我的组件遇到了调用 Mutation ， Action 并从存储/模块获取值的问题。

当我在Vue选项卡（Vuex）中检查开发人员控制台时，可以看到我的State和getter在模块之前具有子文件夹名称。

如果我决定将每个新模块/存储都放入 store 文件夹中，则一切工作都很好。

我正在为模块使用vuex-module-decorators软件包，因为我认为它可以提高代码的可读性并简化过程。

我得到的错误是：

[vuex] unknown action type: applicationStage/initializeArticles
[vuex] unknown mutation type: applicationStage/addArticle

所以问题是：

我做错什么了吗？
在 store 文件夹中可以有一个子文件夹吗？如何在创建模块时以跳过子文件夹名称的方式注册该模块？

我的商店文件夹结构

-store
--index.ts
--progress
---applicationStage.ts

./ store / progress / applicationStage.ts

import {
  Module,
  Action,
  VuexModule,
  Mutation,
  MutationAction
} from "vuex-module-decorators";

interface Article {
  title: string;
  body: string;
  published: boolean;
  meta: {
    [key: string]: string;
  };
}

const articles = [
  {
    title: "Hello World!",
    body: "This is a sample article.",
    published: true,
    meta: {}
  },
  {
    title: "My writing career continues!",
    body: `...but I've run out of things to say.`,
    published: false,
    meta: {}
  }
];

@Module({
  name: "applicationStage",
  stateFactory: true,
  namespaced: true
})
export default class ApplicationStageModule extends VuexModule {
  articles: Article[] = [
    {
      title: "Initial article",
      body:
        "This is the starting point, before we initialize the article store.",
      published: true,
      meta: {}
    }
  ];

  get allArticles() {
    return this.articles;
  }

  get publishedArticles() {
    return this.articles.filter(article => article.published);
  }

  @MutationAction({ mutate: ["articles"] })
  async initializeArticles() {
    return { articles };
  }

  @Mutation
  addArticle() {
    this.articles.push({
      title: "Hello World 2!",
      body: "This is a sample article 2.",
      published: true,
      meta: {}
    });
  }
}

./ components / HelloWorld.vue

<template>
  <div>
    {{ message }}
    <h2>Published articles</h2>
    <article v-for="article in articleList" :key="article.title">
      <h3 v-text="article.title"/>
      <div v-text="article.body"/>
    </article>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getModule } from "vuex-module-decorators";
import ApplicationStageModule from "../store/progress/applicationStage";

@Component
export default class HelloWorld extends Vue {
  message: string = "Hello world !";
  articleStore = getModule(ApplicationStageModule, this.$store);
  articleList: any[] = [
    {
      title: "Initial article",
      body:
        "This is the starting point, before we initialize the article store.",
      published: true,
      meta: {}
    }
  ];

  mounted() {
    this.articleStore.initializeArticles();  // ERROR LINE
    this.articleStore.addArticle();   // ERROR LINE
    this.updateArticles();
  }

  public updateArticles() {
    this.articleList = this.articleStore.allArticles;
  }
}
</script>

我创建了一个沙箱，可以在其中复制我的问题https://codesandbox.io/s/723xyzl60j

Answer 1

您应该使用const applicationStage = namespace("progress/applicationStage/");而不是getModule(...)。当stateFactory为true时，module被“自动加载”。您可能还需要直接在decorator中注入商店。 h，并且当您使用stateFactory时，namespaced选项是没有用的，因为stateFactory 存在 {{1 }}。

Nuxt存储中的子文件夹将模块弄乱了

1 个答案: