How can I transform computed properties method into GETTER and SETTER?

Question

Im completely new into Vuex and decorators, Im in the middle of making searchbar which filters characters by the user input.

  <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());
    });
  }

It works as long as I have searchPhrase defined in component but it breaks up when I try to get it with @Getter('characters/getSearchPhrase') searchPhrase!: string; I tried to make some @Mutation and @Action in my characters.ts module but didn't end successfully

The warning I get:

Answer 1

First, ensure your Vuex module is 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
  }
})

Then, use the vuex-class namespace helper to access the namespaced 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;

  //...
}