vue3+pinia 实现缓存未提交的表单数据，下次进来可以继续编辑

随着vue3的普及vue3的状态管理工具也进行了升级pinia 比vueX更加适配vue3下面是我用vue3+pinia 实现的效果 通常情况下用户可能在表单页面填了很多信息但是没有保存就退出来了，如果不记录用户填写信息的话 如果填写的内容较多，用户还需要重新填写，这样用户体验就不好了，下面是这个功能实现的具体代码

pinia 用法和vuex大致相同 这里就不再赘述基本操作


在页面中引入你定义好的模块然后进行赋值

然后在点击新增按钮时判断 state.formData state.formData.FGUID是否存在，存在就说明 之前编辑过 可以直接跳转表单，这里注意跳转表单后表单的值也是pinia存储的，这样才能保证点击继续的时候显示上次未提交的内容 如果不存在就说明没有点击过，直接新创建一个formData formData 的属性就是你表单提交的字段
进入详情页也是一样先去列表存储的内容 这样如果有值的话 就会显示上次未提交的内容了
下面上全部代码
列表


<template #right>
<Icon name=“plus” size=“25” @click=“openAdd()” />



<DropdownItem v-model=“billState” :options=“drpDeliveryStates” @change=“handleStateChange” />
<DropdownItem v-model=“billDate” :options=“billDates” @change=“handleDateChange” />



<PullRefresh v-model=“pullLoading” @refresh=“onRefresh”>
<List
v-model:loading=“loading”
:finished=“finished”
finished-text=“没有更多了”
@load=“onLoad”
style=“margin-top: 6px”
class=“list_content”
v-show=“!showEmpty”
>
<div :style=“listStyle” v-for=“(item, index) in list” :key=“index” @click=“goToDetail(item)”>


<template #title>

详情


<Form
@failed=“onFailed”
@submit=“onSubmit”
scroll-to-error
class=“publicForm formBottom”
:readonly=“formData.FState > 0”
>

<Field
name=“FBillNo”
v-model=“formData.FBillNo_SRC”
readonly
required
label=“发货单据”
:rules=“rules.FBillNo”
placeholder=“请选择单据”
:is-link=“formData.FState == 0”
@click=“selectDocuments”
/>
<Field
name=“FCustName”
v-model=“formData.FCustName”
label=“调出客户”
placeholder=“请选择客户名称”
:is-link=“formData.FState == 0”
readonly
:rules=“rules.FCustName”
required
@click=“showDealerModal”
/>

  <Field
    name="FInCustName"
    v-model="formData.FInCustName"
    label="调入客户"
    placeholder="请选择客户名称"
    :is-link="formData.FState == 0"
    readonly
    :rules="rules.FInCustName"
    required
    @click="showDealerModal1"
  />
  <Field
    name="FOutStockName"
    v-model="formData.FOutStockName"
    label="调出仓库"
    placeholder="请选择仓库"
    :is-link="formData.FState == 0"
    readonly
    :rules="rules.FOutStockName"
    required
    @click="isShowDriverPicker = true && formData.FState == 0"
  />
  <Field
    name="FInStockName"
    v-model="formData.FInStockName"
    label="调入仓库"
    placeholder="请选择仓库"
    :is-link="formData.FState == 0"
    readonly
    :rules="rules.FInStockName"
    required
    @click="isShowDriverPicker1 = true && formData.FState == 0"
  />

  <Field
    name="FUserName"
    label="调出业务员"
    placeholder="请选择业务员"
    v-model="formData.FUserName"
    :is-link="formData.FState == 0"
    readonly
    :rules="rules.FUserName"
    required
    class="field-label-pl"
    @click="showDealerModal2"
  >
    <!-- <template #button>
      <Icon name="clear" v-if="formData.FParentUserName" @click.stop="showDept()" size="16" />
    </template> -->
  </Field>
  <Field
    name="FInCustUserName"
    label="调入业务员"
    placeholder="请选择业务员"
    v-model="formData.FInCustUserName"
    :is-link="formData.FState == 0"
    readonly
    required
    :rules="rules.FInCustUserName"
    class="field-label-pl"
    @click="showDealerModal3"
  >
    <!-- <template #button>
      <Icon name="clear" v-if="formData.FParentUserName" @click.stop="showDept()" size="16" />
    </template> -->
  </Field>
  <Field
    name="FDeptName"
    v-model="formData.FDeptName"
    label="调出组织"
    placeholder="请选择组织"
    :is-link="formData.FState == 0"
    required
    :rules="rules.FDeptName"
    readonly
    @click="isShowDept = true && formData.FState == 0"
  >
    <!-- <template #button>
      <Icon name="clear" v-if="formData.FDeptName" @click.stop="clShowDept()" size="16" />
    </template> -->
  </Field>
  <Field
    name="FInCustDeptName"
    v-model="formData.FInCustDeptName"
    label="调入组织"
    placeholder="请选择组织"
    :is-link="formData.FState == 0"
    required
    readonly
    :rules="rules.FInCustDeptName"
    @click="isShowDept1 = true && formData.FState == 0"
  >
    <!-- <template #button>
      <Icon name="clear" v-if="formData.FDeptName1" @click.stop="clShowDept1()" size="16" />
    </template> -->
  </Field>
  <Field name="FAddress" v-model="formData.FAddress" label="调出客户地址" placeholder="请输入地址" clearable />
  <Field
    name="FInCustAddress"
    v-model="formData.FInCustAddress"
    label="调入客户地址"
    placeholder="请输入地址"
    clearable
  />
  <Field name="FContact" v-model="formData.FContact" label="调出客户联系人" placeholder="请输入联系人" clearable />
  <Field
    name="FInCustContact"
    v-model="formData.FInCustContact"
    label="调入客户联系人"
    placeholder="请输入联系人"
    clearable
  />
  <Field name="FPhone" v-model="formData.FPhone" label="调出客户电话" placeholder="请输入联系人电话" clearable />
  <Field
    name="FInCustPhone"
    v-model="formData.FInCustPhone"
    label="调入客户电话"
    placeholder="请输入联系人电话"
    clearable
  />
  <!--商品清单-->
  <collapse v-model="activeNames">
    <collapse-item title-class="mytitle" name="1">
      <template #title>
        <div>商品清单</div>
      </template>

      <template #value>
        <div style="color: #333">
          小计：<span style="color: #ee0a24"> ¥{{ formteMoney(totalBalanceAmount) }}</span>
        </div>
      </template>

      <div class="goodsList" v-for="(item, index) in formData.vItems" v-bind:key="index">
        <div class="GroupListIndex">
          <div>{{ bindCount(index) }}</div>
        </div>
        <SwipeCell>
          <Card :thumb="item.FPhoto">
            <template #tags>
              <div class="font16">{{ item.FName }}</div>
              <div class="flex font12">
                <div class="flex1">规格：{{ item.FSpec }}</div>
                <div>x{{ item.FQty }}</div>
              </div>
              <div class="flex1">
                单价：
                <span class="font14 cd1201d">¥{{ formteMoney(item.FPrice) }}</span>
              </div>
              <div class="flex">
                <div class="flex1">
                  金额：
                  <span class="font14 cd1201d">¥{{ formteMoney(item.FAmount) }}</span>
                </div>
                <div class="setGoods" @click="openEditPriceDialog(item, index)">修改</div>
              </div>
            </template>
          </Card>
          <template #right>
            <Button square @click="delectGoods(item, index)" type="danger" text="删除" />
          </template>
        </SwipeCell>
      </div>
    </collapse-item>
  </collapse>
  <div></div>
  <div class="van-panel-item" style="margin-bottom: 50px">
    <Collapse v-model="activeMemo">
      <CollapseItem name="1" lazy-render>
        <div>
          <Field
            name="FMemo"
            v-model="formData.FMemo"
            type="textarea"
            rows="2"
            autosize
            maxlength="500"
            show-word-limit
          />
        </div>
        <template #title>
          <div class="title"><Icon name="notes-o" />备注</div>
        </template>
      </CollapseItem>
    </Collapse>
  </div>
  <ActionSheet v-model:show="isShowDriverPicker" round position="bottom">
    <SelectBasic
      :multiple="false"
      placeholder="选择调出仓库"
      :dataSource="basicData.StockVehicleInfo"
      @onchange="onChangeDriver"
      @cancel="isShowDriverPicker = false"
    />
  </ActionSheet>
  <ActionSheet v-model:show="isShowDriverPicker1" round position="bottom">
    <SelectBasic
      :multiple="false"
      placeholder="选择调出仓库"
      :dataSource="basicData.StockVehicleInfo"
      @onchange="onChangeDriver1"
      @cancel="isShowDriverPicker1 = false"
    />
  </ActionSheet>
  <ActionSheet v-model:show="isShowDept" round position="bottom">
    <SelectTree
      placeholder="选择组织"
      :multiple="false"
      :selectLast="false"
      :selectValue="formData.FDeptName"
      :dataSource="basicData.Department"
      @onchange="onChangeDept"
      @cancel="isShowDept = false"
    />
  </ActionSheet>
  <ActionSheet v-model:show="isShowDept1" round position="bottom">
    <SelectTree
      placeholder="选择组织"
      :multiple="false"
      :selectLast="false"
      :selectValue="formData.FDeptName1"
      :dataSource="basicData.Department"
      @onchange="onChangeDept1"
      @cancel="isShowDept1 = false"
    />
  </ActionSheet>
  <div style="margin: 0.5rem"></div>
  <!-- <ActionBar safe-area-inset-bottom>
    <ActionBarButton type="danger" text="保存" native-type="submit" v-if="id == '0'" />
    <ActionBarButton v-if="isShowAudit" type="danger" text="提交" native-type="submit" />
    <ActionBarButton v-if="isShowUnSubmit" type="danger" text="撤回" @click="onClickUnSubmit" />
    <ActionBarButton v-if="isShowUnSubmit" type="danger" text="审核" @click="onClickAudit" />
    <ActionBarButton v-if="isShowUnAudit" type="danger" text="反审" @click="onClickAudit1" />
  </ActionBar> -->
  <div class="van-action-bar van-safe-area-bottom">

    <Button v-if="isShowAudit"  class="small" type="default" text="提交"   native-type="submit"/>
    <Button class="small" type="default" text="保存" v-if="isShowSubmit &&id == '0' "  native-type="submit" />
    <Button class="small" type="default" text="删除" v-if="isShowDelete" @click="deleteBill"  />
    <Button class="small" type="default" text="撤回" v-if="isShowUnSubmit" @click="onClickUnSubmit" />
    <Button class="small" type="default" text="审批" v-if="isShowAudit1" @click="onClickAudit" />
    <Button class="small" type="default" text="反审" v-if="isShowUnAudit" @click="onClickAudit1"  />
  </div>
</Form>
<!--弹出框，赋予chargeBtn事件-->
<Popup v-model:show="showEditGoodsPriceDialog" title="修改金额" round show-cancel-button>
  <div class="w20rem ptb_5 prl_5">
    <div class="flex h3rem borderB l3rem font16">
      <div class="flex1 flexfff">修改金额</div>
    </div>
    <!--数量-->
    <Field
      v-model="editdGoods.FQty"
      ref="getFocus"
      right-icon="edit"
      @focus="inputfocus($event)"
      autosize
      label="数量"
      type="number"
      placeholder="请输入数量"
    />
    <!--单价-->
    <Field
      v-model="editdGoods.FPrice"
      ref="getFocus"
      autosize
      label="单价"
      right-icon="edit"
      @focus="inputfocus($event)"
      type="number"
      placeholder="请输入单价"
    />
    <!--金额-->
    <Field v-model="FAmount" readonly autosize label="金额" type="number" placeholder="0" />
    <div class="flex h3rem borderT l3rem">
      <!-- <div class="flex1 flexfff borderR" @click="showEditGoodsPriceDialog = false">取消</div> -->
      <div class="flex1 flexfff c2287ee" @click="completeEdit">确认</div>
    </div>
  </div>
</Popup>
<!-- </div> -->