如何将计算属性方法转换为 GETTER 和 SETTER？

Question

我对 Vuex 和装饰器完全陌生，我正在制作通过用户输入过滤字符的搜索栏。

  <input
  class="form-control"
  type="text"
  v-model="searchPhrase"
  placeholder="Search"
/>
<Character
  v-for="character in resultSearching"
  :key="character.id"
  :photo="character.image"
  :characterID="character.id"
  :name="character.name"
  :gender="character.gender"
  :species="character.species"
  :lastEpisode="character.episode[character.episode.length - 1].episode"
  :character="character"
/>


    export default class Characters extends Vue {
 // @Getter("characters/getSearchPhrase") searchPhrase!: string;
  searchPhrase = '';
  get resultSearching(): CharactersApiI[] {
    return this.characters.filter((character) => {
      return character.name
        .toLowerCase()
        .match(this.searchPhrase.toLowerCase());
    });
  }

只要我在组件中定义了 searchPhrase，它就可以工作，但是当我尝试使用 @Getter('characters/getSearchPhrase') searchPhrase!: string; 我试图在我的 characters.ts 模块中创建一些 @Mutation 和 @Action 但没有成功结束

我得到的警告：

Answer 1

首先，确保你的 Vuex 模块是namespaced:

// store/characters.ts
export default {
  namespaced: true, ?
  getters: {
    getSearchPhrase: state => state.searchPhrase
  },
  //...
}

// store/index.ts
import Vue from 'vue'
import Vuex from 'vuex'
import characters from './characters'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    characters
  }
})

然后，使用 vuex-class namespace 帮助器访问命名空间的 getter：

import Vue from 'vue'
import { Getter, namespace } from 'vuex-class'
import Component from 'vue-class-component'

const characters = namespace('characters') ?

@Component
export class MyComp extends Vue {
  @characters.Getter('getSearchPhrase') ?
  searchPhrase !: string;

  //...
}