Vue.js 输入搜索字段后，获取新结果（nuxt、vuex）

在用户在我的Nuxt应用程序中进行新搜索后，我在如何返回新搜索结果方面遇到了问题。搜索查询需要根据邮政编码返回用户，我将目前为止的所有内容都存储在了存储区中。这是我的代码：

/store/index.js

export const state = () => ({
  filter: {
    search: '',
  },
})

export const mutations = {
  SET_TUTORS(state, tutors) {
    state.tutors = tutors
  },
}

export const actions = {
  loadAllTutors({ commit }) {
    const postcode = '1111' // this needs to be variable 

    this.$axios
      .post('http://api.com/end/point', {
        postcode,
      })

      .then(({ data }) => {
        commit(
          'SET_TUTORS',
          data.map((item) => item.attributes)
        )
      })
      .catch((error) => console.log(error))
  },
}

page.vue

<template>
<input
            id="search_field"
            class="block w-full h-full py-4 pl-10 pr-3 text-gray-900 placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 sm:text-sm"
            placeholder="Vul jouw postcode in"
            type="search"
          />
 <ul class="grid grid-cols-1 gap-6">
            <li
              v-for="tutor in tutors"
              :key="tutor.name"
              class="overflow-hidden bg-white border rounded-lg shadow-md"
            >
              <div class="flex">
              </div>
            </li>
</ul>
</template>

export default {
  name: 'Zoeken',
  components: {},

  async fetch({ store }) {
    await store.dispatch('loadAllTutors')
  },

  data: () => ({
    postcode: '1111',
    attributes: [],
  }),
  computed: {
    ...mapGetters(['isAuthenticated', 'loggedInUser']),
    ...mapState(['tutors']),
  },
  methods: {},
  layout: 'app',
  middleware: 'auth',
}

导出默认值{
姓名：'佐肯'，
组件：{}，
异步获取（{store}）{
等待门店发货（'loadAllTutors'）
},
数据：（）=>({
邮政编码：'1111'，
属性：[]，
}),
计算：{
…映射获取程序（['isAuthenticated'，'loggedInUser']），
…映射状态（['tutors']），
},
方法：{}，
布局：“应用程序”，
中间件：“auth”，
}

---

我需要更改什么才能使存储中的index.js获得搜索输入并刷新结果？

您可以通过

loadAllTutors

操作（）的第二个参数传递邮政编码

store/index.js

loadAllTutors（{commit}，邮政编码）{
// ...
}

然后，您应该在页面组件上创建一个新方法，可以调用该方法来分派存储操作

page/page.vue

方法：{
异步fetchTutors（）{
常量邮政编码='1111'；
等待商店发货（'loadAllTutors'，邮政编码）；
}
}

现在，如果您想通过输入元素上类似于

@input

的事件触发新方法，可以直接使用事件对象读取邮政编码（

const postcode=event.target.value

）

如果您通过另一个元素（如另一个按钮）触发它，您可以使用v-model（）通过数据对象访问您的邮政编码

page/page.vue

//在文本框（或任何其他事件）上与@input=“fetchTutors”一起使用
//必须通过搜索输入元素调用
异步fetchTutors（事件）{
等待store.dispatch（'loadAllTutors'，event.target.value）；
}
//与文本框上的v-model=“postcode”一起使用
//可以从任何元素调用
异步fetchTutors（）{
等待商店发货（'loadAllTutors'，此邮政编码）；
}

---

我希望这能解决你的问题。具体如何触发该方法或检索您的邮政编码由您决定。这只是一个基本的例子。

非常感谢！我将异步函数移到了方法中，并对其进行了如下更改：``方法：{async fetchTutors（）{const postcode=this.postcode等待此操作。$store.dispatch（'loadAllTutors'，postcode）}，``现在它几乎可以正常工作了。只有在来回更改路线时，结果才会在显示屏上刷新。但这是我需要调试的另一个问题。Thanks@DennisKraaijeveld我不知道你是怎么触发这种方法的。你用按钮吗？（如果我的回答对你有帮助的话，你接受我的回答将是非常好的）