Vuex - 计算属性“searchPhrase”已分配给但没有设置器

编程问答 2022-05-10

问题描述

我有一个搜索栏，用户可以在其中获取按其输入过滤的字符。

//Dummy input to check if it works
    <input
  class="form-control"
  type="text"
  placeholder="Search"
  v-model="searchPhrase"
  
/>
<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"
  />
 </div>
 </template>


  <script lang="ts">
    import { Vue,Component } from "vue-property-decorator";
    import Character from "./Character.vue";
    import { CharactersApiI } from "@/models/models";
    import { Getter } from "vuex-class";
    @Component({
      components: {
        Character,},})
    export default class Characters extends Vue {
      @Getter("characters/getCharacters") characters!: CharactersApiI[];
      @Getter("characters/getLoading") loading!: boolean;
      @Getter("characters/getError") error!: boolean;
      @Getter("characters/getSearchPhrase") searchPhrase!: string;
      @Getter("characters/getHeaders") headers!: string[];
      get resultSearching(): any {
        return this.characters.filter((character) => {
          return character.name
            .toLowerCase()
            .match(this.searchPhrase.toLowerCase());
        });
      }
      set resultSearching(newValue: any) {
        this.searchPhrase = newValue.target.value.toLowerCase();
      }

我通过@Getter 从 vuex-class 获取存储在 characters.ts 中的状态，它通过输入或 v-model 上的 :value 获取它的值，但在我尝试在那里写东西后它立即开始崩溃。

由于 Llai 的回答而更新版本（有效）： //characters.ts

 @Mutation 
  updateMessage(e: { target: {value: string}}) {
    this.searchPhrase = e.target.value;
  }

//characters.vue

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

getter-settervue.js