how do i use vuex mutation payload object properly

Question

I have 2 inputs in which i provide value to search whether its name of the company, position (1st input) or location (2nd input). It works with one argument provided into foundJobs mutation and then into action. But when payload has an object everything is undefined and array is empty. What am i doing wrong?

component:

<script setup>
import IconSearch from "../Icons/icon-search.vue";
import IconLocation from "../Icons/icon-location.vue";
import { ref } from "vue";
import { useStore } from "vuex";

const store = useStore();

const nameFilter = ref("");
const locationFilter = ref("");
</script>

<template>
  <div class="header-filter">
    <div class="header-filter__search">
      <IconSearch />
      <input
        type="text"
        placeholder="Filter by title, companies, expertise…"
        ref="nameFilter"
      />
    </div>
    <div class="header-filter__location">
      <IconLocation />
      <input
        type="text"
        placeholder="Filter by location…"
        ref="locationFilter"
      />
    </div>
    <div class="header-filter__fulltime">
      <input type="checkbox" />
      <p>Full Time Only</p>
      <button
        type="button"
        @click="
          store.dispatch('foundJobs', {
            nameFilter: nameFilter.value,
            locationFilter: locationFilter.value,
          })
        "
      >
        Search
      </button>
    </div>
  </div>
</template>

vuex: (not working)

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      jobs: [],
      filteredJobs: [],
    };
  },

  mutations: {
    setJobs(state, jobs) {
      state.jobs = jobs;
    },

    foundJobs(state, { nameInputValue, locationInputValue }) {
      let copiedJobsArr = [...state.jobs];

      if (nameInputValue !== "") {
        copiedJobsArr = copiedJobsArr.filter(
          (job) =>
            job.company === nameInputValue || job.position === nameInputValue
        );
      }
      if (locationInputValue !== "") {
        copiedJobsArr = copiedJobsArr.filter(
          (job) => job.location === locationInputValue
        );
      }

      console.log(locationInputValue); // undefined

      state.filteredJobs = copiedJobsArr;
      console.log(state.filteredJobs); //empty array
    },


   
  },

  actions: {
   
    foundJobs(context, { nameInputValue, locationInputValue }) {
      context.commit("foundJobs", { nameInputValue, locationInputValue });
    },

    loadJobs(context) {
      return fetch("./data.json")
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          const transformedData = data.map((job) => {
            return {
              id: job.id,
              company: job.company,
              logo: job.logo,
              logoBackground: job.logoBackground,
              position: job.position,
              postedAt: job.postedAt,
              contract: job.contract,
              location: job.location,
              website: job.website,
              apply: job.apply,
              description: job.description,
              reqContent: job.requirements.content,
              reqItems: job.requirements.items,
              roleContent: job.role.content,
              roleItems: job.role.items,
            };
          });
          context.commit("setJobs", transformedData);
        });
    },

   
  },

  getters: {
    jobs(state) {
      return state.jobs;
    },


    filteredJobOffers(state) {
      return state.filteredJobs;
    },
  },
});


export default store;

vuex (working) - here i also provide one argument into action assigned to a button (in a component file)

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      jobs: [],
      filteredJobs: [],
    };
  },

  mutations: {
    setJobs(state, jobs) {
      state.jobs = jobs;
    },


    foundJobs(state, nameInputValue) {
      let copiedJobsArr = [...state.jobs];

      if (nameInputValue !== "") {
        copiedJobsArr = copiedJobsArr.filter(
          (job) =>
            job.company === nameInputValue || job.position === nameInputValue
        );
      }

      console.log(nameInputValue);

      state.filteredJobs = copiedJobsArr;
      console.log(state.filteredJobs);
    },

 
  },

  actions: {

    foundJobs(context, nameInputValue) {
          context.commit("foundJobs", nameInputValue);
        },




    loadJobs(context) {
      return fetch("./data.json")
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          const transformedData = data.map((job) => {
            return {
              id: job.id,
              company: job.company,
              logo: job.logo,
              logoBackground: job.logoBackground,
              position: job.position,
              postedAt: job.postedAt,
              contract: job.contract,
              location: job.location,
              website: job.website,
              apply: job.apply,
              description: job.description,
              reqContent: job.requirements.content,
              reqItems: job.requirements.items,
              roleContent: job.role.content,
              roleItems: job.role.items,
            };
          });
          context.commit("setJobs", transformedData);
        });
    },


   
  },

  getters: {
    jobs(state) {
      return state.jobs;
    },

    
    filteredJobOffers(state) {
      return state.filteredJobs;
    },
  },
});


export default store;

Answer 1

store.dispatch('foundJobs', {
    nameFilter: nameFilter.value,
    locationFilter: locationFilter.value,
})

You are sending data like this and trying to get on the wrong way

foundJobs(state, { nameInputValue, locationInputValue })

you can receive data this way:

foundJobs(state, { nameFilter, locationFilter})