Subfolder in the Nuxt store is messing with the modules

问题

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.

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.

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.

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

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

The error which I'm getting is:

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

So the questions are:

Am I doing something wrong?
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?

My store folder structure

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

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

回答1:

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.

来源：https://stackoverflow.com/questions/55699712/subfolder-in-the-nuxt-store-is-messing-with-the-modules

标签

typescript

vuex

nuxt

vuex-modules