打字稿：引用 Vuex 存储模块会导致 VueJs 2.5 的命名空间错误

Posted 2023-02-16

【中文标题】打字稿：引用 Vuex 存储模块会导致 VueJs 2.5 的命名空间错误

【英文标题】：Typescript: Referencing a Vuex Store Module gives namespace error for VueJs 2.5

【发布时间】：2019-03-18 19:42:40

【问题描述】：

你好，SO朋友们，

我在我的一个 Vue 组件中引用 Vuex 存储模块时遇到问题。如果我将代码从 authentication.module.ts 移动到 store.ts，我可以让 State 和 Mutations 正常工作，但是当尝试使用模块来获得更清晰的代码时，我似乎无法引用该模块. 我得到一个错误：

[vuex] 在 mapState() 中找不到模块命名空间：@/_Store/_Modules/authentication.module/

我已将 namespaced:true 添加到模块中，所以我很困惑我还缺少什么？

Store.ts

import Vue from "vue";
import Vuex from "vuex";
import Authentication from "@/_Store/_Modules/authentication.module"

Vue.use(Vuex);

export default new Vuex.Store(
modules:
    Authentication

);

authentication.module.ts 更新：添加命名空间：'Authentication' - 问题仍然存在

export default 
    namespaced:true,
    namespace:'Authentication'
    state: 
      counter: 0
    ,
    mutations:
        incrementCounter(state:  counter: number; ) 
            state.counter++    
    
  

Home.Vue（加载时出现错误，因为假设要渲染 State 属性）

        <h1>Hello and Welcome Home!</h1>
        <div>The Count of the store is: counter</div>
        <button type="button" v-on:click='increment'>Click to Increment</button>

<script lang="ts">
import  Vue, Component  from "vue-property-decorator";
import  State, Getter, Action, Mutation, namespace  from "vuex-class";
const Authentication = namespace("@/_Store/_Modules/authentication.module"); // This is the problem line here it seems?

@Component
export default class Home extends Vue 
  @Authentication.State("counter") counter!: number;
  @Authentication.Mutation("incrementCounter") increment!: void;

</script>

Main.ts *更新：添加 Main.ts 文件供参考

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./_Store/store";
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

Vue.config.productionTip = false;

new Vue(
    router,
    store,
    render: h => h(App),
).$mount("#app");

【问题讨论】：

您可能应该给出模块名称，例如：namespace('Authentication')

我将 namepsace:'Authentication' 添加到 authentication.module.ts 并仍然收到相同的错误。感谢您的输入。也许我的路径是错误的？但我已经尝试改变路径十几次，但似乎无法让它发挥作用。

不作为答案发布，因为我不确定它是否属实，但我相信您仍然应该拥有状态、突变、getter 和操作，即使为空，也应将它们导出到根存储中。能否添加export default new Vuex.Store( state: , mutations: , actions: , getters: , modules: Authentication ) 另外，尝试导出export const Authentication 而不是默认值。

@Danijel 感谢您的意见。我将空属性添加到商店中，但仍然没有乐趣。现在，如果我直接将 Counter 添加到商店的状态，我可以访问信息。我的问题肯定是当我尝试分成模块时。我一直在参考文档，但我看不出哪里出错了，因为我可以发誓命名空间：true 会使 vuejs 和打字稿编译映射。

【参考方案1】：

所以我能够解决我的问题。我的问题确实有两个问题，首先是问了两个处理同一件事的问题，但我面临的问题是向 Vuex 商店添加一个模块，这与将命名空间属性添加到模块。

第二个问题是我对 Typescript 和 Vuex 太陌生，无法理解调试错误的含义。

如果您在这里尝试将模块添加到您的 Vuex 商店，请阅读下文。

将模块添加到 Vuex 存储时，它必须包含 Minimum 的状态，因为这是 Getter、Mutations 和 Actions 将影响该模块的地方。在 VuejS - Typescript 中，为了获得所需的这些属性，您的模块需要导入和定义它们。我只为这个模块使用了 State，但也提供了如何使用其他 Vuex 部分。

import  DemoState  from '@/Demotypes';
import  GetterTree, MutationTree, ActionTree  from 'Vuex';

export const state: DemoState = 
    Account: 
        Alerts: [
            id: 1, Message: 'Account password is set to Expire soon. Please change it ASAP.',
            id: 2, Message: 'Another problem',
            id: 3, Message: 'Error Will Robinson',
        ],
    ,
export const getters: GetterTree<DemoState, any> = 
;

export const mutations: MutationTree<DemoState> = 
;

export const actions: ActionTree<DemoState, any> = 
;

现在既然你的模块已经定义好了，它只需要导入到 Vuex Store：

import Vue from 'vue';
import Vuex from 'vuex';
import  Authentication  from '@/store/modules/authentication.module';
import  DemoData  from '@/store/modules/data.module';

Vue.use(Vuex);

export default new Vuex.Store(
  modules: 
      Authentication,
      DemoData,
  ,
);

现在定义了模块，使用 namespace:true 将起作用，因为它包含它的地图状态，因为我的 OP 说是我的错误。

【讨论】：

你为什么用any代替RootState？正确的不应该是GetterTree <DemoState, RootState> ActionTree <DemoState, RootState>？我真的不明白为什么RootState应该是，没有的危险