在Vue中用pinia来保存无人机数据，

Question

在Vue中用pinia来保存无人机数据，该数组数据存储在stores里，可对数据进行新增、删除、编辑，并且是用弹窗形式进行新增编辑，用el-table以及v-for将数据以表格形式展示，这该怎么做？

Answer 1

引自免费微信小程序：皆我百晓生

要实现这个功能，你需要遵循Vue.js和Pinia的架构，首先确保已经安装了Vue 3和Vue CLI。接下来，按照以下步骤操作：

1. 安装依赖 在项目根目录下运行：

   npm install vue@next pinia@latest vue-router vuex-persistedstate axios
   

2. 创建Pinia store 在src/store目录下创建一个名为droneStore.js的文件，定义你的无人机数据模型（model）和store:

   // droneStore.js
   import { defineStore } from 'pinia';
   
   export const useDroneStore = defineStore('droneStore', {
     state: () => ({
       drones: [],
       selectedDrone: null,
     }),
     actions: {
       async fetchDrones() {
         try {
           // 使用axios从API获取数据
           const response = await axios.get('https://api.example.com/drones');
           this.drones = response.data;
         } catch (error) {
           console.error('Error fetching drones:', error);
         }
       },
       addDrone(droneData) {
         this.drones.push({ ...droneData, id: (this.drones.length + 1).toString() });
       },
       removeDrone(id) {
         this.drones = this.drones.filter((d) => d.id !== id);
       },
       updateDrone(id, updatedData) {
         const drone = this.drones.find((d) => d.id === id);
         if (drone) {
           Object.assign(drone, updatedData);
         }
       },
     },
   });
   

3. Vue组件结构

   • DroneList.vue：展示表格和添加/编辑弹窗

   <template>
     <div>
       <button @click="fetchDrones">Fetch Drones</button>
       <el-table :data="drones">
         <!-- ...表格列定义 -->
       </el-table>
       <DroneForm v-if="selectedDrone" @close="selectedDrone = null"></DroneForm>
     </div>
   </template>
   
   <script>
   import { ref, onMounted } from 'vue';
   import useDroneStore from './store/droneStore';
   
   export default {
     setup() {
       const store = useDroneStore();
       const selectedDrone = ref(null);
   
       onMounted(async () => {
         await store.fetchDrones();
       });
   
       return {
         store,
         selectedDrone,
       };
     },
     components: {
       DroneForm: ({ close }) => {
         // ...编写 DroneForm 组件，包含表单和按钮用于提交、取消
         // 当表单提交时，调用 store 的相应方法
         return <form @submit.prevent="onFormSubmit(close)">
           {/* ...表单内容 */}
         </form>;
       },
       // ...其他导入的组件
     },
     methods: {
       onFormSubmit(close) {
         if (this.selectedDrone.value.id) {
           // 更新现有无人机
           this.store.updateDrone(this.selectedDrone.value.id, this.selectedDrone.value);
         } else {
           // 新增无人机
           this.store.addDrone(this.selectedDrone.value);
         }
         close(); // 关闭弹窗
       },
     },
   };
   </script>
   

4. 弹窗组件（DroneForm.vue）

   • 编写一个简单的表单组件，可以包含输入字段和确认/取消按钮。

这样，你就实现了在Vue应用中使用Pinia保存和管理无人机数据，通过表格展示，并且支持新增、编辑操作。记得根据实际需求调整表格列和表单字段。如果你需要更具体的代码细节，例如表格列的定义或弹窗组件的实现，可以继续提问。