Composition API를 사용하여 Vuex name leted getter를 사용하는 방법

Composition API를 사용하여 Vuex name leted getter를 사용하는 방법

나는 현재 그것을 회수하려고 하고 있다.tagsVuex에서 Searchbar 모듈로.그러나 그것은 반응적이지 않다.

다음은 구성 요소:

<template>
  <div class="tags">
    <tag v-for="tag in tags" :key="tag.name">{{ tag.name }}</tag>
  </div>
</template>

import { defineComponent, computed } from '@vue/composition-api';
import store from '@/store/index';
import Tag from '@/components/BaseTag.vue';

export default defineComponent({
  components: {
    Tag
  },
  setup() {
    const tags = computed(() => store.getters['Searchbar/all']);
    return {
      tags
    };
  }
});

및 vuex 모듈

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

type VuexTag = { name: string; type: TagType };

@Module({
  namespaced: true
})
export default class Searchbar extends VuexModule {
  private tagsInput: Array<VuexTag> = [];

  get all(): Array<VuexTag> {
    return this.tagsInput;
  }

  @Mutation
  addTag(tag: VuexTag): void {
    this.tagsInput[this.tagsInput.length] = tag;
  }

  @Mutation
  removeTag(index: number): void {
    this.tagsInput.splice(index, 1);
  }
}

왜인지 모르겠다.나는 Typecript를 사용하고 있다. 그래서 그것은 다음을 지원하지 않는다.store.Searchbar.getters['all'])좋은 생각이 있어?

그래, 내가 문제를 찾았어.내 잘못은 컴포지션 API와는 아무 상관이 없다.상기의 코드가 그것에 대해 작용하고 있다.

Vuex 모듈에서, 나는 업데이트 해야 했다.addTag다음과 같은 돌연변이:

  @Mutation
  addTag(tag: SearchbarTag): void {
    Vue.set(this.tagsInput, this.tagsInput.length, tag);
  }

기본적으로 어레이 변경은 기본적으로 반응하지 않으므로Vue.set방법의

참조URL: https://stackoverflow.com/questions/62196252/how-to-use-vuex-namespaced-getter-with-the-composition-api