在Vue中用pinia来保存表单数据

Question

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

Answer 1

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

要在 Vue 中使用 Pinia 存储表单数据并以表格的形式展示，你需要遵循以下步骤：

1. 安装 Pinia： 首先确保你已经安装了 Vue 3，并且全局安装 Pinia 和它的配套库 vuex-persistedstate（用于持久化存储）。

npm install @vue/cli-pinia vuex-persistedstate --save

1. 创建 Pinia store： 接下来创建一个 Pinia store 来管理你的表单数据。在 src 文件夹下新建一个名为 store 的文件夹，然后在这个文件夹内创建一个名为 formData.store.ts 的文件：

// src/store/formData.store.ts
import { defineStore } from 'pinia';
import createPersistedState from 'vuex-persistedstate';

export const useFormDataStore = defineStore('formData', {
  state: () => ({
    formDataList: [], // 表单数据列表
  }),
  actions: {
    addFormData(formData: any) {
      this.formDataList.push(formData);
    },
    removeFormData(index: number) {
      this.formDataList.splice(index, 1);
    },
    editFormData(index: number, updatedFormData: any) {
      this.formDataList[index] = { ...this.formDataList[index], ...updatedFormData };
    },
  },
  persist: {
    storage: window.localStorage,
    key: 'formData',
  },
});

这个 store 包含了一个状态变量 formDataList，以及添加、删除和更新表单数据的方法。

1. 在组件中使用 store： 在需要使用表单数据的组件中，引入并使用 useFormDataStore：

<!-- src/components/FormTable.vue -->
<template>
  <div>
    <button @click="addNewFormData">Add New</button>
    <el-table :data="formDataList" style="width: 100%">
      <el-table-column label="Name" prop="name"></el-table-column>
      <el-table-column label="Email" prop="email"></el-table-column>
      <el-table-column label="Actions">
        <template slot-scope="{ row, $index }">
          <el-button type="primary" @click="editFormData($index)">Edit</el-button>
          <el-button type="danger" @click="removeFormData($index)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useFormDataStore } from '@/store/formData.store';

export default defineComponent({
  name: 'FormTable',
  setup() {
    const formDataStore = useFormDataStore();
    
    const addNewFormData = () => {
      formDataStore.addFormData({ name: '', email: '' });
    };

    const editFormData = (index: number) => {
      // 提示用户输入新的字段值
      const newFormData = prompt('Enter the updated data:', JSON.stringify(formDataStore.formDataList[index]));
      if (newFormData) {
        formDataStore.editFormData(index, JSON.parse(newFormData));
      }
    };

    const removeFormData = (index: number) => {
      formDataStore.removeFormData(index);
    };

    return {
      addNewFormData,
      editFormData,
      removeFormData,
      formDataList: formDataStore.formDataList,
    };
  },
});
</script>

1. 在 App.vue 中注册 store： 在 App.vue 中注册 Pinia store 并挂载到根组件上：

<!-- src/App.vue -->
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script lang="ts">
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
import { useFormDataStore } from './store/formData.store';

const app = createApp(App);

const pinia = createPinia();

pinia.use(createPersistedState());

app.use(pinia).mount('#app');
</script>

这样就完成了在 Vue 中使用 Pinia 保存表单数据并在表格中展示的功能。当用户添加、编辑或删除表单数据时，这些更改会自动保存在浏览器本地存储中。如果你想要在其他组件中共享表单数据，只需像在 FormTable.vue 组件中那样导入并使用 useFormDataStore 即可。