javascript - Filter items in search bar Vue Composition API

Question

I have an vue app using quasar and the composition API. When the application launches it initially collects data from the database once and it returns a list of Categories which contain People within each category. What i want to do is add support for Searching as shown in the image above. My question is where do i place the code that does the filtering of people within each Category? Does it go in the view component as a computed property or should i do this logic inside the 'getters'? Any psuedo code would be greatly appreciated.

The search input is written back to the 'state' so i can access that value within other parts of the application.

Here are my main files.

getters.ts

import { StateInterface } from '../index';
import { AppState } from 'src/models/types';

const getters: GetterTree<AppState, StateInterface> = {
  categories: state => state.categories,
  isBusy: state => state.isBusy,
  settings: state => state.settings,
  filters: (state) => state.filters,
};

export default getters;

index.vue the important bits of the file

<template>
  <q-page>
    <!-- displaying sections and people-->
      <q-list>
        <q-expansion-item
          v-for="cat in categories"
          :label="cat.name"
          :key="cat.name"
        >
          <q-card>
            <q-card-section>
                <PersonCard
                  v-for="(item, index) in cat.people"
                  :key="index"
                  :item="item"
                />
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-list>
  </q-page>
</template>

export default defineComponent({
  name: 'PageIndex',
  components: {},
  setup(props, { root }) {
    const categories = computed<Category[]>(() => root.$store.getters['app/categories']);
    return {
      categories,
    };
  },
});
</script>

UPDATE - in response to answer suggestion...

So you are suggesting i do something like this

getters.ts

import { GetterTree } from 'vuex';

import { StateInterface } from '../index';
import { AppState } from 'src/models/types';

const getters: GetterTree<AppState, StateInterface> = {
  categories: state => state.categories,
  isBusy: state => state.isBusy,
  settings: state => state.settings,
  filters: (state) => state.filters,
  categoriesFiltered: state => ({
    const categories: Category[] = [];
    // for-loop people per category collecting those that match search string     
    return categories;
  }) 
};

export default getters;

question from:https://stackoverflow.com/questions/66051060/filter-items-in-search-bar-vue-composition-api

Answer 1

Put it into getters of store as getters is for computed data and just call that getters in created hook at view component