我如何正确使用vuex突变有效载荷对象

Question

我有2个输入，我可以在其中搜索其公司名称，位置（第一输入）还是位置（第二输入）。它与提供的一个参数合作，然后在fundjobs突变中进行行动。但是，当有效载荷有一个对象时，所有内容都不确定，并且数组为空。我在做什么错？

成分：

<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 ：（不工作）

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（工作） - 在这里，我还将一个参数提供给分配给按钮的操作（在组件文件中）

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,
})

您正在发送这样的数据，并试图以错误的方式接收

foundJobs(state, { nameInputValue, locationInputValue })

数据：

foundJobs(state, { nameFilter, locationFilter})