vue.js - 如何将 Vuex 命名空间的 getter 与 Composition API 一起使用

Question

我目前正在尝试tags从 Vuex 检索 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);
  }
}

我不明白为什么。我正在使用 Typescript，所以它不支持store.Searchbar.getters['all'])...有想法吗？

Answer 1

好的，我发现了问题。我的错：它与组合 API 无关。上面的代码正在处理它。

在 Vuex 模块中，我必须按addTag如下方式更新突变：

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

基本上数组更改默认情况下是不响应的，所以我们必须使用该Vue.set方法。