Nuxt商店中的子文件夹正在弄乱模块

Question

试图在Nuxt和typescript中创建一个项目。然而，文档很差，我遇到了很多问题。不知何故能够解决大部分问题，但堆积在商店的问题上。根据Nuxt文档，store目录中的每个文件都转换为一个模块。

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

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

如果我决定将每个新模块/商店放在商店文件夹中，一切都工作得很好。

我在我的模块中使用vuex-module-decorators包，因为在我看来它提高了代码的可读性并简化了过程。

我得到的错误是：

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

所以问题是：

1. 难道我做错了什么？
2. 我可以在商店文件夹中有一个子文件夹，以及如何在创建模块时以跳过子文件夹名称的方式注册模块？

我的商店文件夹结构

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

./store/progress/application stage.同时

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.v UE

<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中注入商店。嗯，当你使用stateFactory时，namespaced选项是无用的，因为它将被命名为由于stateFactory是true。