如何将 Vuex 命名空间 getter 与 Composition API 一起使用

Question

我目前正在尝试从 Vuex 的 Searchbar 模块中检索 tags。但是，它不是反应性的。

这是组件：

<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方法。

如何将 Vuex 命名空间 getter 与 Composition API 一起使用

How to use Vuex namespaced getter with the Composition API

vue.js

vuex

vue-composition-api