如何解决我们如何在 vuex-module-decorators + Nuxt TypeScript 中访问 store 模块文件中的 Vuex store 实例? ~/store/index.ts~/utils/store-accessor.ts
有许多可能的方法来构建您的模块。
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>({});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。