Попытка создать проект в Nuxt и машинописи. Однако документация очень плохая, и я столкнулся с множеством проблем. Каким-то образом удалось решить большинство из них, но у них возникла проблема с store . На основе документации Nuxt каждый файл в каталоге хранилища преобразуется в модуль.
Чтобы лучше организовать свой проект, я решил добавить подпапку в папку store . Однако после этого изменения у моих компонентов возникают проблемы с вызовом Mutation , Action и получением значений из хранилища / модуля.
Когда я проверяю консоль разработчика в Vue Tab (Vuex), я вижу, что у моего состояния и получателей есть имя подпапки перед модулем.
В случае, если я решу поместить каждый новый модуль / магазин в папку store , все будет работать абсолютно нормально.
Я использую пакет vuex-module-decorators для своих модулей, так как, на мой взгляд, он улучшает читабельность кода и упрощает процесс.
Ошибка, которую я получаю:
[vuex] unknown action type: applicationStage/initializeArticles
[vuex] unknown mutation type: applicationStage/addArticle
Итак, вопросы:
- Я что-то не так делаю?
- Могу ли я иметь подпапку внутри папки store и как зарегистрировать модуль таким образом, чтобы пропустить имя подпапки при создании модуля?
My store структура папок
-store
--index.ts
--progress
---applicationStage.ts
. / Магазин / прогресс / 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: {}
});
}
}
. / Компоненты / 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