问题描述
有许多可能的方法来构建您的模块。
vuex-module-decorators official readme
最流行的方法之一是 vuex-module-decorators。
Nuxt TypeScript official documentation
那么，至少在哪些地方引入了两种方法？文档只介绍了一种方法，大多数文章都引用了它。
官方方法列表
~/store/index.ts
import { Store } from 'vuex'
import { initialiseStores } from '~/utils/store-accessor'
const initializer = (store: Store<any>) => initialiseStores(store)
export const plugins = [initializer]
export * from '~/utils/store-accessor'
~/utils/store-accessor.ts
import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import example from '~/store/example'
let exampleStore: example
function initialiseStores(store: Store<any>): void {
exampleStore = getModule(example,store)
}
export { initialiseStores,exampleStore }
为什么我不接受它
- 我不明白我们在做什么。代码量虽小，但有很多不明显的东西。例如：为什么我们需要定义
plugins常量？为什么我们需要导出它？我们如何以及在何处使用此导出？ - 我不明白为什么我们需要诸如此类的杂技。如果有其他方法，它必须是更直观的解决方案。
- 我不明白为什么我们应该遵循这种方法，而不是其他方法。
- 这还不够类型安全。 'any' 已被使用。
我想做什么
如果可能，我想像往常一样使用“vuex-module-decorators”，或者，至少了解正在发生的事情并开发更干净的解决方案。
'vuex-module-decorators'中动态模块的标准用法是：
import store from "@store";
import { Module,VuexModule } from "vuex-module-decorators";
@Module({
name: "PRODUCTS_MANAGER",dynamic: true,namespaced: true,store
})
class ProductsManagerStoreModule extends VuexModule {}
但是我们如何在 Nuxt TypeScript 应用程序中获取 store 实例？
Nuxt从我们这里取出了vuex store（和路由和webpack控制一样），让开发变得简单，但是这里是反效果。
尝试照常使用vuex存储
这很有趣，但它适用于开发环境，但不适用于生产环境。
store/index.ts
import Vuex,{ Store } from "vuex";
export const store: Store<unkNown> = new Vuex.Store({});
export default store;
pages/index.vue
import { Component,Vue } from "nuxt-property-decorator"
import { getModule } from "nuxt-property-decorator";
import TestStoreModule from "./../Store/TestStoreModule";
@Component
export default class extends Vue {
private readonly title: string = "It Works!";
private mounted(): void {
console.log("=========");
console.log(getModule(TestStoreModule).currentCount);
}
}
store/TestStoreModule.ts
import { Module,VuexModule,Mutation } from "vuex-module-decorators";
import store from "./index";
@Module({
name: "TestStoreModule",store
})
export default class TestStoreModule extends VuexModule {
private count: number = 0
@Mutation
public increment(delta: number): void {
this.count += delta
}
@Mutation
public decrement(delta: number): void {
this.count -= delta
}
public get currentCount(): number {
return this.count;
}
}
ERROR [nuxt] store/index.ts should export a method that returns a Vuex instance.
? Application in above state (GitHub repository)（项目结构有点不同，抱歉）。
我尝试按照说明修复它。现在，store/index.ts 是：
// config.rawError = true;
/* 〔 see 〕 https://develop365.gitlab.io/nuxtjs-2.1.0-doc/pt-BR/guide/vuex-store/ */
export default function createStore(): Store<unkNown> {
return new Vuex.Store({});
}
TestStoreModule 现在不能引用 store（如果可以，如何？）。
@Module({
name: "TestStoreModule",stateFactory: true
})
export default class TestStoreModule extends VuexModule { /* ... */ }
在组件中，尝试访问存储模块为：
console.log(getModule(TestStoreModule,this.$store).currentCount);
输出为：
似乎是“这个”问题。如果我们输出 console.log(getModule(TestStoreModule,this.$store)); 并从 Chrome 控制台调用 currentCount：
我们得到错误：
Exception: TypeError: Cannot read property 'count' of undefined at Object.get
(webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:165:36)
at Object.r (<anonymous>:1:83)
? Application in above state (GitHub repository)
解决方法
我无法回答这些问题中的所有原因，但我会尽力提供帮助
首先，你说得对，Nuxt 在其核心实现了 Vuex。这就是为什么你有一些为什么。例如，plugins 常量的定义你可以在 nuxt 文档中找到 here
其次，要了解如何烹饪 vue + typescript，我建议阅读有关 really typing vue 的文章。不涉及 vuex-module-decorator 的使用，只介绍 vuex-simple。此外，它有很好的 template 引导新项目
我希望这能帮助您并增进理解！
,当我问这个问题时，我不知道可以像在普通 Vue 应用程序中一样在 Nuxt 中使用 dynamic modules。动态模块给出了最简洁的语法，使效果就像每个模块都是独立的。不需要像 store-accessor.ts 这样的黑客；无需收集所有模块是单个目录。这种方法是我的选择和推荐。
问题 Dynamic vuex store modules with NuxtJS and vuex-module-decorators 涵盖了 Nuxt 的 vuex-module-decorators 设置。
这样，回答当前问题，在 store/index.ts 中，我们可以创建 store 实例，将其导入并在每个动态模块中使用：
import Vue from "vue";
import Vuex,{ Store } from "vuex";
Vue.use(Vuex);
export const store: Store<unknown> = new Vuex.Store<unknown>({});