使用vuex搜索列表的搜索栏

// store/search.js

const state = {
  keyword: '',
  searchResults: []
}

const mutations = {
  SET_KEYWORD(state, keyword) {
    state.keyword = keyword
  },
  SET_SEARCH_RESULTS(state, results) {
    state.searchResults = results
  }
}

const actions = {
  setSearchKeyword({ commit }, keyword) {
    commit('SET_KEYWORD', keyword)
  },
  search({ commit, state }) {
    // 发起搜索请求，获取搜索结果
    // 可以使用axios或其他网络请求库发送请求
    // 将搜索结果通过commit提交到mutations中进行更新
    // 例如：
    // axios.get('/api/search', { params: { keyword: state.keyword } })
    //   .then(response => {
    //     commit('SET_SEARCH_RESULTS', response.data)
    //   })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

// components/SearchBar.vue

<template>
  <div>
    <input type="text" v-model="keyword" @input="search" placeholder="请输入关键词">
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.title }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('search', ['keyword', 'searchResults'])
  },
  methods: {
    ...mapActions('search', ['setSearchKeyword', 'search'])
  }
}
</script>