我们如何在 vuex-module-decorators + Nuxt TypeScript 中访问存储模块文件中的 Vuex 存储实例？

Question

有许多种可能的方式来构建您的模块。

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 }

为什么我不接受它

1. 我不明白我们在做什么。虽然代码量不大，但是有很多不明显的东西。例如：为什么我们需要定义plugins 常量？为什么我们需要导出它？我们如何以及在何处使用此导出？
2. 我不明白为什么我们需要杂技之类的。如果还有其他方法，那一定是更直观的解决方案。
3. 我不明白为什么我们应该遵循这种方法，而不是其他方法。
4. 类型安全不够。 '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",
  namespaced: true,
  dynamic: true,
  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",
  namespaced: true,
  stateFactory: true
})
export default class TestStoreModule extends VuexModule { /* ... */ }

在组件中，尝试访问 store 模块为：

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)

Answer 1

我无法回答这些问题中的所有原因，但我会尽力提供帮助

首先，你说得对，Nuxt 在其核心中实现了 Vuex。这就是为什么你有一些原因。例如plugins常量的定义你可以在nuxt docs中找到here

其次，要了解如何烹饪 vue + typescript，我建议阅读有关 really typing vue 的文章。它不包括 vuex-module-decorator 的使用，而是介绍 vuex-simple。此外，它有很好的template 来引导新项目

希望对您有所帮助，加深理解！

Answer 2

当我问这个问题时，我不知道在 Nuxt 中可以像在普通 Vue 应用程序中一样使用 dynamic modules。动态模块给出了最简洁的语法，并使得每个模块的效果都是独立的。不需要像store-accessor.ts这样的黑客；无需收集所有模块是单个目录。这种方法是我的选择和推荐。

Dynamic vuex store modules with NuxtJS and vuex-module-decorators 的问题涵盖了 Nuxt 的 vuex-module-decorators 的设置。

通过这种方式，回答当前问题，在store/index.ts中我们可以创建商店实例，将其导入并在每个动态模块中使用：

import Vue from "vue";
import Vuex, { Store } from "vuex";


Vue.use(Vuex);

export const store: Store<unknown> = new Vuex.Store<unknown>({});