vue3 引入pinia增删改查数组对象

在 Vue3 中引入 Pinia（Vue.js 官方推荐的状态管理模式）来进行数据管理，特别是处理数组的增删改查操作，你可以按照以下步骤进行：

1. **安装和配置 Pinia**: 首先，确保已经安装了 Vue 和 @vue/runtime-env，然后安装 `pinia`：

   npm install --save pinia

2. **创建 store**: 在项目中创建一个新的文件（例如：store.js），初始化一个 Pinia store，并定义一个状态（state）用于存储数组对象：

   import { defineStore } from 'pinia';

   export const useTodoStore = defineStore('todo', {
     state: () => ({
       todos: [], // 初始的空数组
     }),
     actions: {
       // 增加 todo
       addTodo({ commit }, newTodo) {
         commit('addTodo', newTodo);
       },
       
       // 删除 todo
       removeTodo({ commit }, index) {
         commit('removeTodo', index);
       },
       
       // 修改 todo
       updateTodo({ commit }, updatedTodo, index) {
         commit('updateTodo', { index, updatedTodo });
       },
       
       // 清空 todos
       clearTodos() {
         commit('clearTodos');
       },
       
       // 其他方法，如分页、搜索等可以根据需求添加
     },
     mutations: {
       // 更新状态的方法
       addTodo(state, newTodo) {
         state.todos.push(newTodo);
       },
       
       removeTodo(state, index) {
         state.todos.splice(index, 1);
       },
       
       updateTodo(state, { index, updatedTodo }) {
         state.todos[index] = updatedTodo;
       },
       
       clearTodos(state) {
         state.todos.length = 0; // 更简洁地清空数组
       }
     }
   });

3. **在组件中使用 store**：在需要操作数组的地方导入 store 并调用其提供的方法：

   import { useTodoStore } from './store';

   export default {
     setup() {
       const todos = useTodoStore().todos;
       const addTodo = useTodoStore.addTodo;
       const removeTodo = useTodoStore.removeTodo;
       const updateTodo = useTodoStore.updateTodo;

       return {
         todos,
         addTodo,
         removeTodo,
         updateTodo,
       };
     }
   };

当你在组件中调用这些方法时（例如通过表单事件或按钮点击），Pinia 就会自动更新对应的 store 状态，从而实现实时的增删改查操作。