Vue3实现表格的行删除

在Vue3中，我们可以利用Vuex的状态管理库来实现实时的表格行删除功能。以下是基本步骤：

1. 安装必要的依赖：

   npm install vuex axios // 如果还没有安装，需要这两个库来处理状态管理和HTTP请求

2. 创建Vuex store：
在store文件中设置一个数组来存储数据，并定义一个删除操作mutation：

   import { createStore } from 'vuex';
   export default createStore({
     state: {
       tableData: [], // 初始化的数据列表
     },
     mutations: {
       deleteRow(state, index) {
         if (index >= 0 && index < state.tableData.length) {
           state.tableData.splice(index, 1);
         }
       },
     },
   });

3. 在组件中引用store并监听数据变化：

   <template>
     <!-- ... -->
     <button @click="deleteRow(rowIndex)">删除</button>
     <!-- ... -->
   </template>

   <script>
   import { mapState } from "vuex";
   
   export default {
     computed: {
       ...mapState(["tableData"]), // 映射store的数据到组件
     },
     methods: {
       deleteRow(rowIndex) {
         this.$store.commit("deleteRow", rowIndex);
       },
     },
   };
   </script>

4. 当用户点击删除按钮时，`deleteRow`方法会被触发，它会通过`commit`方法调用Vuex store内的`deleteRow` mutation，更新store中的数据，进而驱动视图更新。