我们如何能够访问Vuex模块文件中的vuex存储实例-装饰器+ Nuxt TypeScript？

Question

有许多可以构造模块的方法。 vuex模块-装潢师官方自述 是最流行的方法之一，它是vuex模块装饰器。 Nuxt TypeScript正式文档

那么，至少有两种方法被引入了？这些文档只介绍了一种方法，而大多数文章都提到了它。

官方方法清单

~/存储/索引

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模块-装饰器”，或者，至少要了解发生了什么，并开发出更干净的解决方案。

在“vuex模块-装饰器”中，动态模块的标准用法是：

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应用程序中获得TypeScript实例呢？Nuxt从我们那里取出vuex商店(和路由和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. 

处于上述状态的应用程序(GitHub存储库) (项目结构有点不同，对不起)。

有人告诉我，我试着把它修好。现在，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);

产出如下：

​

​

好像是“这个”问题。如果我们输出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)

处于上述状态的应用程序(GitHub存储库)

Answer 1

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

问题带有NuxtJS和vuex模块装饰器的动态vuex存储模块涵盖了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>({});

Answer 2

我不能回答这个问题的全部原因，但我会尽力帮助你

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

其次，为了了解如何编写vue +打字本，我建议阅读有关真正输入vue的文章。它没有涉及vuex模块-装饰器的使用，而是介绍了vuex-simple。此外，它还具有非常好的模板来引导新项目。

我希望这将有助于你和提高了解！