Vue / Vuex구성 요소에서 Vuex 저장소 속성에 액세스할 수 없음

Vue / Vuex구성 요소에서 Vuex 저장소 속성에 액세스할 수 없음

vue 앱과 컴포넌트가 있습니다.컴포넌트는 등록이 완료되어 정상적으로 렌더링된다.상태 관리를 돕기 위해 vuex를 가져왔습니다.나는 활자 안전을 위해 활자 스크립트와 vue-class-decorator를 사용하고 있다.

내 앱은 다음과 같다: .ts

// load vuex stores
let store = require('./store/store.ts');

// register components here...
Vue.component('my-component', require('./components/MyComponent.vue'));

// initialize vue applications here...
const app = new Vue({
    el: '#app',
    store
});

스토어를 console.log하면 해당 스토어가 올바르게 필요한지 확인할 수 있습니다.

여기가 제 가게입니다: .ts

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        active: false,
    },
    getters: {
        isActive: state => state.active
    }
});

여기 컴포넌트가 있습니다. .ts

import { Vue, Component, Prop } from 'vue-property-decorator'
import axios from 'axios'

@Component
export default class MyComponent extends Vue {

    @Prop(String) route?: string

    resent: boolean = false

    loading: boolean = false



    // constructor
    mounted (): void {
        if (!this.route) {
            throw new Error("The route property is missing");
        }
    }

    get myActiveState (this :Vue): any {
        console.log(this.$store);
        return this.$store.getters.isActive;
    }
}

어떤 방법을 사용해도 Store State Property에 액세스할 수 없습니다.콘솔 로그 가능this.$store브레이크 포인트를 삽입하여 검사하는 경우와 마찬가지로 올바른 스토어를 얻을 수 있지만 콘솔로그를 작성하려고 하면 액티브한 속성에 직접 액세스 할 수 있습니다.this.store.state.active또는this.store.getters.isActive에러가 표시됩니다.

[Vue warn]: Error in render: "TypeError: Cannot read property 'isActive' of undefined"

브레이크 포인트를 삽입하고 콘솔을 검사하여 각 자산의 내용을 다시 확인할 수 있습니다.모두 좋아 보인다.하지만 다음 방법으로 자산에 액세스할 수 없습니다.$store.state.active하지 않으면 안 돼$store.default.state.active.

이게 무슨 일이야?코드화 되어 있는데 왜 주(州)에 접속할 수 없는 거죠?추가 코드화 시도 중this.$store.default.state.active빌드 오류가 발생하다property does not exist on type Store<any>

이 사람은 이 문제에 대해 훌륭한 해결책을 적용합니다.https://www.youtube.com/watch?v=V9MmoBAezD8

간단히 말하면 vuex v4.0.0 릴리스에서 문서화되어 있듯이 이 문제를 해결하려면 shims-vuex.d.ts를 생성해야 합니다.

[ State type ]는 에서 내보냅니다.store/index.ts그리고 그것은 당신의 상태를 나타내야 한다.

import { State } from './store/index.ts';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: Store<State>;
  }
}

// Vuex@4.0.0-beta.1 is missing the typing for `useStore`. See https://github.com/vuejs/vuex/issues/1736
declare module 'vuex' {
  export function useStore(key?: string): Store<State>;
}

언급URL : https://stackoverflow.com/questions/59691082/vue-vuex-vuex-store-properties-not-accessible-from-my-component