Vuex 모듈 장식가:여기에서 vuex 모듈에 액세스하십시오.$store가 모듈을 등록하지 않음

Vuex 모듈 장식가:여기에서 vuex 모듈에 액세스하십시오.$store가 모듈을 등록하지 않음

내 프로젝트에서, 나는 작은 vuex 모듈을 만들었다.vuex-module-decorators. 그러나 직접 액세스하려고 할 때this.$store또는$store템플릿 부분에서는 등록을 트리거하지 않는다.

예를 들면 다음과 같다.

// exampleModule.ts
import { Module, getModule, Mutation, VuexModule } from 'vuex-module-decorators';
import store from '@/store';

@Module({
  dynamic: true,
  namespaced: true,
  name: 'example',
  stateFactory: true,
  store,
})
class Example extends VuexModule {
  private work: boolean = false;

  get isWorking() {
    return this.work;
  }

  @Mutation
  setWorking(status: boolean) {
    this.work = status;
  }
}

export default getModule(Example);

// App.vue
<template>

  <div> 
    first attempt: {{ $store.getters['example/isWorking'] }} // this is not working
    second attempt: {{ isWorking }} // this is not working too
  </div> 
</template>

<script lang="ts">
  import Vue from 'vue';

  export default Vue.extend({
    computed: {
      isWorking() {
        return this.$store.getters['example/isWorking'];
      }
    }
  });
</script>

모듈을 실제로 등록하고 작동시킬 수 있는 유일한 방법은 다음과 같이 구성부품에 직접 수입하는 것이다.

<script lang="ts">
  import Vue from 'vue';
  import exampleModule from '@/store/modules/example/exampleModule';

  export default Vue.extend({
    computed: {
      isWorking() {
        return exampleModule.isWorking;
      }
    }
  });
</script>

내가 뭘 빠트렸나요?이게 수배된 행동인가?고마워요.

Btw, 나는 그들의 Github 저장소에 문제를 열었지만, 나는 아직 아무런 답을 가지고 있지 않다. 그래서 나는 여기에 있다.

https://github.com/championswimmer/vuex-module-decorators/issues/190

나는 코멘트를 할 수 없으니 여기서 대답할게.main.js 파일로 상점을 가져오셨나요?어쩌면 그것이 문제일 수도 있어.행운을 빈다!

사용하고 있는 모듈은 동적이므로 사용하기 전에 등록해야 한다.

this.$store.registerModule('example', Example) // Don't forget to import your module

사용 전에 등록하는 것이 중요하므로 에 등록하는 것을 제안하고 싶다.created(). 모듈이 이미 추가되었는지 여부를 확인하는 조건을 추가하는 것을 고려할 수 있다.https://github.com/vuejs/vuex/issues/833에서 확인하십시오.

이 방법이 도움이 되기를 바란다(:

또한 스토어의 Index.ts 파일에서 모듈을 가져왔는지 확인하십시오.({ namespaced })모듈에서 true로 설정됨.(이미 한 일)

폴더 구조 예:

/store
└── /modules
    └── Example.ts
    └── Other.ts
    └── Products.ts
    └── ...
└── index.ts

인덱스.ts

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

Vue.use(Vuex)

import { Example } from './modules/Example'
import { Other } from './modules/Other'
import { Products } from './modules/Products'

export default new Vuex.Store({
  modules: {
    Example,
    Other, // Another module.
    Products // Another module.
  }
})

예.ts

import { Module, VuexModule, Mutation } from 'vuex-module-decorators'

@Module({ namespaced: true })
export class Example extends VuexModule {
  work = false // You don't need to specify with work: boolean as TS will know the type by itself.

  @Mutation
  setWorking(status: boolean) {
    this.work = status
  }

  get isWorking() {
    return this.work
  }
}

앱뷰

<template>
  <div> 
    first attempt: {{ $store.getters['Example/isWorking'] }}
  </div> 
</template>

먼저 getModule 및 생성된 vuex 모듈 가져오기

import { getModule } from 'vuex-module-decorators'
import MyModule from '@/store/modules/MyModule'

그런 다음 기본적으로 getModule의 결과, 모듈 및 이와 같은 데이터 속성을 초기화하십시오.$s store

// .js
myModule: getModule(MyModule, this.$store)

// .ts
myModule: MyModule = getModule(MyModule, this.$store)

마지막으로, 당신은 당신의 컴포넌트 안에서 당신의 모듈을 이용하여 어떤 상태, 게이터, 행동 등에 접근할 수 있다.

this.myModule.myData

this.myModule.myAction()

// ...

나도 같은 문제가 있어.이렇게 풀었어.

store/index.ts

import { Store } from 'vuex';
export const store = new Store({});

상점/점포

import { Action, Module, Mutation, VuexModule } from 'vuex-module-decorators';
import { store } from '@/store';

@Module({
    name: 'example',
    namespaced: true,
    stateFactory: true,
    dynamic: true, // <--- important part
    store
})
export default class Example extends VuexModule {
  work = false 

  @Mutation
  setWorking(status: boolean) {
    this.work = status
  }

  get isWorking() {
    return this.work
  }
}

app.vue

<template>
  <div> 
    first attempt: {{ $store.getters['example/isWorking'] }}
  </div> 
</template>

동적 vuex 모듈에서 첫 번째 라인 입력.ts스토어 가져오기여야 함:

import { store } from '@/store';
// rest of the module...

참조URL: https://stackoverflow.com/questions/59967515/vuex-module-decorators-access-vuex-module-from-this-store-does-not-register-th