Как я могу преобразовать метод вычисляемых свойств в GETTER и SETTER?

Я совершенно новичок в 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; Я пытался сделать некоторые @Mutation и @Action в моем модуле character.ts, но не закончился успешно

Предупреждение, которое я получаю: введите здесь описание изображения


vue.js computed-properties vuex vuex-modules
person Goteii    schedule 17.04.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Во-первых, убедитесь, что ваш модуль Vuex имеет пространство имен:

// 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 для доступа к геттеру с пространством имен:

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;

  //...
}
person tony19    schedule 17.04.2021
comment
Да, у меня есть что-то подобное в моем модуле с vuex-module-decorators, и консоль показывает мне присваиваемое значение, но не установленный сеттер. Я борюсь с сеттером. Я использую двустороннюю привязку с v-моделью, поэтому на самом деле я не передаю значение пользовательского ввода, но он нужен сеттеру. Вот как выглядит мой модуль character.ts: gyazo.com/6698effb4d73bf5758eb52ab1f33bd51 Это действительно работает: gyazo.com/d6e045ffa2000a45ac0da81c29f6b1b1 - person Goteii; 18.04.2021