vue2 rxjs 删除

### 如何在 Vue 2 中使用 RxJS 实现删除功能

#### 创建 Observable 和 Subject 来处理数据流

为了实现删除操作，在 `src/service` 文件夹内创建一个新的服务文件用于定义与后端交互的方法。假设这个文件名为 `dataService.js`。

import { ajax } from 'rxjs/ajax';
import { BehaviorSubject, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

const dataSubject = new BehaviorSubject([]);

export const fetchData$ = () => {
    return ajax({
        url: '/api/data',
        method: 'GET'
    }).pipe(
        map(response => response.response),
        catchError(error => {
            console.error('Error fetching data:', error);
            return of([]);
        })
    );
};

export const deleteDataItem$ = id => {
    return ajax({
        url: `/api/data/${id}`,
        method: 'DELETE'
    }).pipe(
        map(() => ({
            type: 'delete',
            payload: id,
        })),
        catchError(error => {
            console.error(`Error deleting item with ID ${id}:`, error);
            return of({type: 'error'});
        })
    );
};

上述代码片段展示了如何利用 RxJS 的 `ajax` 函数发起 HTTP 请求并返回一个可观察对象 (Observable)，以及通过 `BehaviorSubject` 维护状态[^1]。

#### 将逻辑集成到 Vuex Store 或者 Component 内部

如果采用 Vuex 进行全局状态管理，则可以在 store 下建立相应的 actions 及 mutations 处理这些异步行为；如果不使用 Vuex，也可以直接放在组件内部完成同样的工作：

当不适用 Vuex 而是在组件中实现时，可以这样做:

<template>
  <div v-for="item in items" :key="item.id">
      {{ item.name }}
      <button @click="remove(item)">Delete</button>
  </div>
</template>

<script>
import { deleteDataItem$, fetchData$ } from '../service/dataService';
import { switchMapTo, tap } from "rxjs/operators";
import { merge } from "rxjs";

export default {
  name: 'ItemList',
  data() {
    return {
      items: []
    };
  },
  created() {
    this.loadItems();
  },
  methods: {
    loadItems() {
      fetchData$().subscribe(data => {
          this.items = data;
      });
    },
    remove(item) {
      // 使用RxJS来执行删除动作，并更新UI
      deleteDataItem$(item.id).pipe(
          tap(action => action.type === 'delete' && 
              (this.items = this.items.filter(i => i.id !== item.id))),
          switchMapTo(fetchData$())
      ).subscribe(this.setItems.bind(this));
      
      function setItems(newItems){
          this.items=newItems;
      }
  }
}
</script>

这段模板和脚本部分说明了怎样订阅来自 service 层的数据变化，并且实现了点击按钮触发删除请求的功能[^2]。