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

Question

There are many possible ways to construct your modules.

vuex-module-decorators official readme

One of the most popular approaches is 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常量？为什么我们需要导出它？我们如何以及在何处使用此导出？
我不明白为什么我们需要这样的杂技。如果还有其他的办法，那一定是更直观的解法。
我不明白为什么我们应该遵循这种方法，而不是其他方法。
不够type-safe。 '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

这很有趣，但它在开发环境中有效，但在生产环境中无效。

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 { /* ... */ }

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

console.log(getModule(TestStoreModule, this.$store).currentCount);

输出为：

似乎是 'this' 的问题。如果我们输出 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 文档

中找到 here

其次，要了解如何编写 vue + typescript，我建议阅读有关 really typing vue. It doesn`t cover usage of vuex-module-decorator, but introduce vuex-simple. Also, it have very good template 到 bootstrap 新项目的文章

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

Answer 2

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

问题 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>({});

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

How we can access to Vuex store instance inside store module file in vuex-module-decorators + Nuxt TypeScript?

typescript

nuxt.js

vuex

vuex-modules

vuex-module-decorators