Nuxt存储中的子文件夹将模块弄乱了 [英] Subfolder in the Nuxt store is messing with the modules

问题描述

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

Trying to create a project in Nuxt and typescript. However the documentation it's very poor and I hit a lot of issues. Somehow was able to solve most of them, but stacked on an issue with the store. Based on the Nuxt documentation every file inside the store directory is transformed to a module.

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

To organize better my project I decided to add a subfolder inside store folder. However after this change my components are having issues with calling Mutation, Action and getting values from the store/module.

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

When I'm checking the Developer Console in Vue Tab (Vuex) I can see that my State and getters have the subfolder name before the module.

如果我决定将每个新模块/存储都放入 store 文件夹中，那么一切都将正常运行.

In case that I decide to put every new module/store inside the store folder everything is working absolutely fine.

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

I'm using vuex-module-decorators package for my modules as in my opinion it improves readability of the code and simplify the process.

我得到的错误是:

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

所以问题是:

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

1. Am I doing something wrong?
2. Can I have a subfolder inside the store folder and how to register the module in a way to skip the subfolder name when it's creating the module?

我的商店文件夹结构

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

./store/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

./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

I have created a sandbox where my issue can be replicated https://codesandbox.io/s/723xyzl60j

推荐答案

您应使用const applicationStage = namespace("progress/applicationStage/");而不是getModule(...). 当stateFactory为true时，module为自动加载". 您可能也需要直接在decorator中注入商店. 呵呵，当您使用stateFactory时，namespaced选项是没有用的，因为stateFactory being true，由于命名空间，因此true.

You should use const applicationStage = namespace("progress/applicationStage/"); instead of getModule(...). When stateFactory is true the module is "autoloaded". You might need to inject the store directly in the decorator too. Huh, and when you use stateFactory, namespaced option is useless because it will be namespaced due to stateFactory being true.

这篇关于Nuxt存储中的子文件夹将模块弄乱了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！