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

Question

当用户在我的 Nuxt 应用程序中进行新搜索后，我遇到了如何 return 新搜索结果的问题。搜索查询需要 return 个基于邮政编码的用户，我将到目前为止的所有内容都存储在商店中。这是我的代码：

/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',
}

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

Answer 1

您可以通过 loadAllTutors 操作 (Docs) 的第二个参数传递邮政编码。

store/index.js

loadAllTutors({ commit }, postcode) {
  // ...
}

然后您应该在您的页面组件上创建一个新方法，您可以调用该方法来调度您的商店操作。

pages/page.vue

methods: {
  async fetchTutors() {
    const postcode = '1111';
    await store.dispatch('loadAllTutors', postcode);
  }
}

现在，如果您想通过输入元素上的 @input 之类的事件触发新方法，您可以直接使用事件对象来读取邮政编码 (Docs - const postcode = event.target.value)

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

pages/page.vue

// Use with @input="fetchTutors" on textbox (or any other event)
// Must be invoked through the search input element
async fetchTutors(event) {
  await store.dispatch('loadAllTutors', event.target.value);
}

// Use with v-model="postcode" on textbox
// Can be invoked from any element
async fetchTutors() {
  await store.dispatch('loadAllTutors', this.postcode);
}

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

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

After input search field, fetch new results (nuxt, vuex)

store

vue.js

vuex

nuxt.js