[Vuejs]-How to pass an input event to the getter store Vuex?

by

1👍

✅

Getters are basically computed properties for the vuex store. They take the state as their first argument and other getters as their second argument. If you want to send something as parameters to the store and then perform operations on it, you would have to define an action in the store and then call that action in your component and pass whatever data you need to, to it. Getters are meant to access your vuex state and return them to your component.

Example getter:
store.js

    //initialize the store
    state: {
      todos: []
    },
    actions: {
      getTodos(/*data from component*/) {
        //set data in todos state and call this action in your component
        state.todos = //data from component
     }
    },
    getters: {
      todos(state) {
        return state.todos;
      }
    }

Edit:

Here’s how your component file would look like.

component.vue

    <input
      type="text"
      placeholder="Search here"
      v-model="search"
     />

    <script>
    import { ref } from 'vue';
    import { getProducts } from '../store';

    const search = ref('');

    const products = () => {
        getProducts(search.value);
    }
    </script>

store.js

    export const state = () => ({
      products: [],
    });
    
    export const mutations = {
      setProducts(state, data) {
        state.products = data;
      },
    }
    export const actions = {
      async getProducts({ commit }, search) {
        const result = await fetch()
        //perform filter logic here
        commit('setProducts', result);
      },
    }
    export const getters = {
      getProducts(state) {
        return state.products;
      },
    };

Make sure to use the getter inside a computed property in your component.

Note that this code is based on Vue 3

👤Huzaifa Shah

Leave a comment