组件函数中的 vuex 调度操作

Question

我想分派一个动作并将值传递到输入中。当我像这样直接在按钮上发送一个动作时：

 <button type="button" @click="store.dispatch("foundJobs", {
    nameInputValue: nameFilter.value, 
    locationInputValue: locationFilter.value, 
    contractCheckboxValue: contractFilter,
});">Search</button>

一切正常。但是当我想制作一个外部函数以使其更清晰和可读时，它没有获取输入值而是给我一个输入元素作为输出：

const nameFilter = ref("");
const locationFilter = ref("");
const contractFilter = ref(false);

 <input type="text" placeholder="Filter by title, companies, expertise…"  ref="nameFilter"/>
 <input type="text" placeholder="Filter by location…" ref="locationFilter"/>
 <input type="checkbox" v-model="contractFilter" />

const searchResults = () => {
  store.dispatch("foundJobs", {
    nameInputValue: nameFilter.value, // console.log shows "input" element
    locationInputValue: locationFilter.value, // console.log shows "input" element
    contractCheckboxValue: contractFilter, // console.log shows "input" element
  });
};


 <button type="button" @click="searchResults">Search</button>

为什么会这样？

Answer 1

脚本部分和模板部分的代码区别在于refs are unwrapped in templates.

在模板中编写代码是一种有问题的做法，因为这会破坏关注点分离并使组件更难维护。

应该是：

 nameInputValue: nameFilter.value.value

unref 的使用使意图更加明确，并强调 value 不是在 ref 上访问，而是在某些对象上访问：

nameInputValue: unref(nameFilter).value

组件函数中的 vuex 调度操作

vuex dispatching action in a component function

javascript

vue.js

vuex