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

Question

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

Answer 1

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

要实现这个功能，首先确保已经安装了Vue 3和Pinia。如果你还没有安装，可以按照以下步骤操作：

1. 安装Vue 3：

npm install -g @vue/cli
vue create your-project-name
cd your-project-name

1. 初始化并安装Pinia：

vue add pinia

接下来，我们将创建一个名为DroneStore的 Pinia store 来管理无人机的数据。在 src/stores 目录下创建一个名为 drone-store.js 的文件，并添加以下内容：

// src/stores/drone-store.js
import { defineStore } from 'pinia';

export const useDroneStore = defineStore('droneStore', {
  state: () => ({
    drones: [
      // 示例数据
      { id: 1, name: 'Drone 1', model: 'X8' },
      { id: 2, name: 'Drone 2', model: 'Y6' },
    ],
  }),
  actions: {
    addDrone(drone) {
      this.drones.push(drone);
    },
    deleteDrone(id) {
      this.drones = this.drones.filter((d) => d.id !== id);
    },
    updateDrone(id, updatedData) {
      const droneIndex = this.drones.findIndex((d) => d.id === id);
      if (droneIndex !== -1) {
        this.$patch(() => ({ drones: [...this.drones.slice(0, droneIndex), { ...this.drones[droneIndex], ...updatedData }, ...this.drones.slice(droneIndex + 1)] }));
      }
    },
  },
});

然后，在需要使用这个store的组件中引入并使用它：

<!-- components/DroneList.vue -->
<template>
  <div>
    <button @click="addDrone">Add Drone</button>
    <el-table :data="drones" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name" edit-render="{default: row => { return '<input v-model="row.name"/>'; }}"></el-table-column>
      <el-table-column prop="model" label="Model"></el-table-column>
      <el-table-column label="Actions">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="editDrone(scope.row)">Edit</el-button>
          <el-button type="danger" size="small" @click="deleteDrone(scope.row.id)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useDroneStore } from './drone-store';

export default {
  setup() {
    const store = useDroneStore();
    const drones = ref(store.drones);

    function addDrone() {
      store.addDrone({ id: Date.now(), name: '', model: '' });
    }

    function editDrone(drone) {
      // 在实际应用中，可能需要弹窗或模态框来编辑
      drone.name = prompt('Enter new name:', drone.name);
      drone.model = prompt('Enter new model:', drone.model);
      store.updateDrone(drone.id, { name: drone.name, model: drone.model });
    }

    function deleteDrone(id) {
      store.deleteDrone(id);
    }

    return {
      drones,
      addDrone,
      editDrone,
      deleteDrone,
    };
  },
};
</script>

在这个例子中，我们创建了一个 Pinia store 来存储无人机数据。在组件中，我们使用 ref 和 useDroneStore 访问和修改数据。我们还使用 Element UI 的 el-table 组件来显示数据，并提供了添加、编辑和删除无人机的功能。

注意：此示例中的编辑功能非常简单，仅用于演示目的。在实际项目中，你可能需要使用弹窗或模态框来提供更友好的用户交互。