完成数据持久化方式缓存示例

Former-commit-id: ad9918157b0f25f353e218870a1486fd111c76b3 [formerly ad9918157b0f25f353e218870a1486fd111c76b3 [formerly ad9918157b0f25f353e218870a1486fd111c76b3 [formerly ad9918157b0f25f353e218870a1486fd111c76b3 [formerly 5ab32ee88ba0cbb71499514202fa88131944b6cf [formerly 8b6298bcec0cf00eda1342846fa3f8ff3fea5192]]]]]
Former-commit-id: fca6f35a71568c622756ce2341ca4c8d6a043fa9
Former-commit-id: ec6ab591de18bd6c57c3e4e93f708686a2d75386
Former-commit-id: d3153bca1972183e08a4e709c98cbb525914a8cd [formerly 051d39ec9aa2aa953143b2bb6f10fcb74f53d8b3]
Former-commit-id: 76b941703caef91041247018a11b1cf10999d440
Former-commit-id: f39e54960b15eb225abb0019219895f1d3864bb8
Former-commit-id: 0c790b19d0b4040413cdb16dacb11ce3db465694
Former-commit-id: 929843b780f1309638bdd31aa00965806820b41d
Former-commit-id: e5609aee97279c71ed2963f67f9521aef2fb86b1

src/pages/demo/business/issues/142/edit-cache-db.vue

@@ -0,0 +1,98 @@
+<template>
+  <d2-container
+    type="card"
+    class="page">
+    <el-form
+      ref="form"
+      :model="form"
+      label-width="80px"
+      class="page--form">
+      <el-form-item label="姓名">
+        <el-input v-model="form.name"/>
+      </el-form-item>
+      <el-form-item label="地址">
+        <el-input type="textarea" v-model="form.address"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit">修改</el-button>
+      </el-form-item>
+    </el-form>
+  </d2-container>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import base from './mixins/index'
+export default {
+  mixins: [
+    base
+  ],
+  // 第一次进入或从其他组件对应路由进入时触发
+  beforeRouteEnter (to, from, next) {
+    const id = to.params.id
+    if (id) {
+      next(async vm => {
+        if (from.name === 'demo-business-issues-142') {
+          await vm.getFormData(id)
+          vm.saveDataToDb()
+        } else {
+          vm.loadDataFromDb(to)
+        }
+      })
+    }
+  },
+  // 在同一组件对应的多个路由间切换时触发
+  beforeRouteUpdate (to, from, next) {
+    const id = to.params.id
+    if (id) {
+      this.loadDataFromDb(to)
+      next()
+    }
+  },
+  watch: {
+    // 表单变化的时候更新持久化
+    form: {
+      handler () {
+        this.saveDataToDb()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    ...mapActions('d2admin/db', [
+      'pageSet',
+      'pageGet',
+      'pageClear'
+    ]),
+    // 将页面数据同步到持久化存储
+    saveDataToDb () {
+      this.pageSet({ vm: this, user: true })
+    },
+    // 从持久化存储恢复数据到页面
+    async loadDataFromDb (to) {
+      const vm = {
+        $route: {
+          fullPath: to.fullPath
+        },
+        $data: {}
+      }
+      const data = await this.pageGet({
+        vm,
+        user: true
+      })
+      for (const key in data) {
+        if (data.hasOwnProperty(key)) this[key] = data[key]
+      }
+      this.$message.success('loadDataFromDb')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.page {
+  .page--form {
+    max-width: 460px;
+  }
+}
+</style>