解决Vue下拉刷新重复数据问题

Vue.filter('unique', function (value) {
  // 去重逻辑
});

<ul>
  <li v-for="item in data | unique">{{ item }}</li>
</ul>

data() {
  return {
    isLoading: false, // 是否正在加载数据
  };
},
methods: {
  loadData() {
    if (this.isLoading) return;

    this.isLoading = true;

    // 请求数据的逻辑

    this.isLoading = false;
  },
},

data() {
  return {
    loadedIds: [], // 已加载数据的唯一标识
  };
},
methods: {
  loadData() {
    // 请求数据的逻辑
    // ...

    // 过滤掉已经加载的数据
    const filteredData = newData.filter((item) => {
      return this.loadedIds.indexOf(item.id) === -1;
    });

    // 添加新数据的唯一标识
    this.loadedIds = this.loadedIds.concat(filteredData.map((item) => item.id));

    // 将新数据合并到已有数据中
    this.data = this.data.concat(filteredData);
  },
},

methods: {
  refreshData() {
    // 发送刷新请求，获取最新数据
    // ...

    // 替换已有数据
    this.data = newData;
  },
},

const store = new Vuex.Store({
  state: {
    loading: false, // 数据是否正在加载
  },
  mutations: {
    setLoading(state, status) {
      state.loading = status;
    },
  },
});

methods: {
  loadData() {
    if (this.$store.state.loading) return;

    this.$store.commit('setLoading', true);

    // 请求数据的逻辑

    this.$store.commit('setLoading', false);
  },
},