vue实现单一筛选、删除筛选条件

要实现单一筛选、删除筛选条件，我们需要理解 Vue 组件之间的通信，具体的做法是使用一个共享状态管理筛选条件，当用户点击筛选或者删除筛选条件时，修改这个共享状态，并通知组件进行相应的更新。这个共享状态可以借助于 Vuex 状态管理器实现。

下面是实现这个功能的具体步骤：

第一步：创建 Vuex 状态管理器

声明一个对象作为 Vuex 的 state，这个 state 中用一个数组 filterList 来存储筛选条件，然后声明一些 mutation 和 action 来对这个状态进行修改和查询。

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    filterList: [], // 存放筛选条件的数组
  },
  mutations: {
    // 添加筛选条件
    addFilter(state, newFilter) {
      state.filterList.push(newFilter);
    },
    // 删除筛选条件
    removeFilter(state, filterIndex) {
      state.filterList.splice(filterIndex, 1);
    },
  },
  actions: {
    // 同步添加筛选条件
    addFilterSync(context, newFilter) {
      context.commit('addFilter', newFilter);
    },
    // 同步删除筛选条件
    removeFilterSync(context, filterIndex) {
      context.commit('removeFilter', filterIndex);
    },
  },
});

export default store;

第二步：使用 Vuex 状态管理筛选条件

在需要使用筛选条件的组件里面，使用 Vue 的 computed 计算属性将筛选条件作为组件的一个属性，当状态管理器的 filterList 发生变化时，这个计算属性也会相应更新。当组件需要添加、删除筛选条件时，直接调用 actions 来修改状态即可。

<template>
  <div>
    <!-- 组件的模板代码 -->
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['filterList']),
    // 将筛选条件拼接成一个字符串
    filterString() {
      return this.filterList.join('; ');
    },
  },
  methods: {
    ...mapActions(['addFilterSync', 'removeFilterSync']),
    // 组件的其他方法
  }
};
</script>

<style>
/* 组件的样式 */
</style>

第三步：添加筛选条件

当需要添加筛选条件时，调用 addFilterSync action，将新的筛选条件传递给它。addFilterSync 会调用 addFilter mutation，将新的筛选条件添加到状态中。此时，关注计算属性 filterString 的变化即可。

this.addFilterSync('价格大于1000');

第四步：删除筛选条件

当需要删除某个筛选条件时，在计算属性 filterList 中查找与要删除的筛选条件相同的元素的下表，然后将这个下标作为参数调用 removeFilterSync action，removeFilterSync 会调用 removeFilter mutation，将这个筛选条件从状态中删除。此时，关注计算属性 filterString 的变化即可。

// 获取要删除的筛选条件的下标
const filterIndex = this.filterList.indexOf('价格大于1000');
this.removeFilterSync(filterIndex);

下面是一个完整的示例代码，这个示例中，用户可以通过输入框添加筛选条件，然后可以点击筛选条件的关闭按钮删除筛选条件。用户的筛选条件会显示在界面上。

<template>
  <div>
    <h1>筛选条件</h1>
    <p v-if="!filterList.length">暂无筛选条件</p>
    <ul>
      <li v-for="(filter, index) in filterList" :key="index">
        <span>{{ filter }}</span>
        <span class="close" @click="removeItem(index)">×</span>
      </li>
    </ul>
    <div>
      <input type="text" v-model="newFilter">
      <button @click="submit">添加</button>
    </div>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['filterList']),
    // 将筛选条件拼接成一个字符串
    filterString() {
      return this.filterList.join('; ');
    },
  },
  methods: {
    ...mapActions(['addFilterSync', 'removeFilterSync']),
    // 添加筛选条件
    submit() {
      this.addFilterSync(this.newFilter);
      this.newFilter = '';
    },
    // 删除筛选条件
    removeItem(index) {
      this.removeFilterSync(index);
    },
  },

  data() {
    return {
      newFilter: '',
    };
  },
};
</script>

<style>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 2px 8px;
  border: 1px solid #eee;
  cursor: pointer;
}

li .close {
  margin-left: 5px;
  color: red;
  cursor: pointer;
}
</style>