Vuex创建搜索过滤器

要使用Vuex创建搜索过滤器，可以按照以下步骤进行：

1. 在Vue项目中使用Vue CLI或手动创建一个新的Vue应用程序。

2. 安装Vuex依赖：

npm install vuex --save

3. 在src目录下创建一个store目录，并在其中创建一个filter.js文件。

4. 在filter.js文件中，使用Vuex创建一个store来管理搜索过滤器的状态：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    filterText: '',
  },
  mutations: {
    setFilterText(state, text) {
      state.filterText = text;
    },
  },
  actions: {
    updateFilterText({ commit }, text) {
      commit('setFilterText', text);
    },
  },
});

5. 在main.js文件中导入并使用filter.js中的store：

import Vue from 'vue';
import App from './App.vue';
import store from './store/filter';

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

6. 在组件中使用搜索过滤器：

<template>
  <div>
    <input v-model="searchText" placeholder="Search" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

export default {
  data() {
    return {
      searchText: '',
    };
  },
  computed: {
    ...mapState(['filterText']),
    filteredItems() {
      return this.items.filter((item) =>
        item.name.toLowerCase().includes(this.filterText.toLowerCase())
      );
    },
  },
  methods: {
    ...mapActions(['updateFilterText']),
    updateSearchText() {
      this.updateFilterText(this.searchText);
    },
  },
  created() {
    this.searchText = this.filterText;
  },
};
</script>

在上述代码中，我们使用了mapState和mapActions辅助函数，用于将Vuex store中的状态和动作映射到组件中。filteredItems计算属性根据filterText过滤了items数组。

这就是使用Vuex创建搜索过滤器的解决方法。你可以根据自己的需求进行修改和扩展。