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

Posted 2023-02-23

【中文标题】如何将计算属性方法转换为 GETTER 和 SETTER？

【英文标题】：How can I transform computed properties method into GETTER and SETTER?

【发布时间】：2021-07-12 11:14:10

【问题描述】：

我对 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 但没有成功结束

我得到的警告：

【参考方案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;

  //...

【讨论】：

是的，我在我的模块中使用 vuex-module-decorators 完成了类似的操作，控制台向我显示了分配的值但没有设置 setter。我正在为二传手的事情苦苦挣扎。我使用 v-model 的双向绑定，所以我并没有真正传递用户输入值，但 setter 需要一个。这就是我的 characters.ts 模块的样子：gyazo.com/6698effb4d73bf5758eb52ab1f33bd51 我正在尝试使用 Actions 做一些事情，但并没有真正起作用：gyazo.com/d6e045ffa2000a45ac0da81c29f6b1b1