타이프스크립트:VueX 스토어 모듈을 참조하면 VueJs 2.5에 대한 네임스페이스 오류가 표시됨

타이프스크립트:VueX 스토어 모듈을 참조하면 VueJs 2.5에 대한 네임스페이스 오류가 표시됨

안녕하세요 SO Friends씨,

Vue 컴포넌트 중 하나에서 vuex 스토어 모듈을 참조하는 데 문제가 있습니다.authentication.module.ts에서 store.ts로 코드를 이동하면 State와 Mutiations가 동작합니다만, 클리너 코드에 모듈을 사용하려고 하면 모듈을 참조할 수 없는 것 같습니다.오류 발생:

[vuex] 모듈 이름 공간을 mapState()에서 찾을 수 없음: @/_Store/_Modules/authentication.module/

모듈에 namesloaded: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.ts.
갱신일 :네임스페이스가 추가되었습니다.'인증' - 아직 문제가 있습니다.

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>

메인.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");

그래서 나는 내 문제를 해결할 수 있었다.제 질문에는 두 가지 문제가 있습니다.첫 번째는 같은 문제를 다루는 두 가지 질문입니다만, 제가 직면한 문제는 모듈에 네임스페이스 속성을 추가하는 것과는 무관한 Vuex Store에 모듈을 추가하는 것이었습니다.

두 번째 문제는 Typescript와 Vuex에 너무 익숙하지 않아서 디버깅오류가 무엇을 나타내고 있는지 이해할 수 없다는 것입니다.

Vuex 스토어에 모듈을 추가하려고 하는 경우 아래를 참조하십시오.

Vuex 스토어에 모듈을 추가할 때는 최소 상태를 포함해야 합니다.이 경우 해당 모듈에 대한 Getters, Mutorations 및 Actions가 영향을 미칩니다.VuejS - Typescript에서 이러한 속성을 사용하려면 모듈을 Import하여 정의해야 합니다.이 모듈에서는 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하기만 하면 됩니다.

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를 사용하면 mapstate가 포함되어 있기 때문에 동작합니다.이는 OP가 오류였기 때문입니다.

언급URL : https://stackoverflow.com/questions/52798775/typescript-referencing-a-vuex-store-module-gives-namespace-error-for-vuejs-2-5