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

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>

src/pages/demo/business/issues/142/edit.vue

@@ -1,13 +1,12 @@
 <template>
   <d2-container
     type="card"
-    class="demo-business-issues-142-edit">
+    class="page">
-    <template slot="header">编辑 id: {{id}}</template>
     <el-form
       ref="form"
       :model="form"
       label-width="80px"
-      class="demo-business-issues-142-edit--form">
+      class="page--form">
       <el-form-item label="姓名">
         <el-input v-model="form.name"/>
       </el-form-item>
@@ -22,22 +21,11 @@
 </template>
 
 <script>
-import { get } from '@/api/demo/business/issues/142'
+import base from './mixins/index'
 export default {
-  props: {
+  mixins: [
-    id: {
+    base
-      type: String,
+  ],
-      required: true
-    }
-  },
-  data () {
-    return {
-      form: {
-        name: '',
-        address: ''
-      }
-    }
-  },
   // 第一次进入或从其他组件对应路由进入时触发
   beforeRouteEnter (to, from, next) {
     const id = to.params.id
@@ -61,43 +49,14 @@ export default {
     } else {
       next(new Error('未指定ID'))
     }
-  },
-  methods: {
-    // [业务逻辑] 重置表单
-    resetFormData () {
-      this.form = {
-        name: '',
-        address: ''
-      }
-    },
-    // [业务逻辑] 根据 id 获取数据
-    getFormData (id) {
-      get(id)
-        .then(res => {
-          const { name, address } = res
-          this.form = { name, address }
-        })
-        .catch(err => {
-          console.log('err', err)
-        })
-    },
-    // [业务逻辑] 提交
-    handleSubmit () {
-      this.$notify({
-        title: 'Submit',
-        message: '提交了表单',
-        type: 'success'
-      })
-    }
   }
 }
 </script>
 
 <style lang="scss">
-.demo-business-issues-142-edit {
+.page {
-  .demo-business-issues-142-edit--form {
+  .page--form {
     max-width: 460px;
-    margin: 0px auto;
   }
 }
 </style>

src/pages/demo/business/issues/142/index.vue

@@ -2,7 +2,8 @@
   <d2-container type="card">
     <d2-crud
       v-bind="crud"
-      @edit="handleEdit"
+      @edit="({ index, row }) => goToEditPage('demo-business-issues-142-edit', row.id)"
+      @edit-cache-db="({ index, row }) => goToEditPage('demo-business-issues-142-edit-cache-db', row.id)"
       style="margin: -15px 0;"/>
     <template slot="footer">
       <d2-link-btn
@@ -38,6 +39,11 @@ export default {
               text: '无缓存编辑',
               size: 'mini',
               emit: 'edit'
+            },
+            {
+              text: '带缓存编辑 DB',
+              size: 'mini',
+              emit: 'edit-cache-db'
             }
           ]
         }
@@ -45,11 +51,11 @@ export default {
     }
   },
   methods: {
-    handleEdit ({ index, row }) {
+    goToEditPage (name, id) {
       this.$router.push({
-        name: 'demo-business-issues-142-edit',
+        name,
         params: {
-          id: row.id
+          id
         }
       })
     }

src/pages/demo/business/issues/142/mixins/index.js

@@ -0,0 +1,54 @@
+import { get } from '@/api/demo/business/issues/142'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      form: {
+        name: '',
+        address: ''
+      }
+    }
+  },
+  methods: {
+    // [业务逻辑] 重置表单
+    resetFormData () {
+      this.form = {
+        name: '',
+        address: ''
+      }
+    },
+    // [业务逻辑] 根据 id 获取数据
+    getFormData (id) {
+      return new Promise((resolve, reject) => {
+        // 重置表单
+        this.resetFormData()
+        // 请求数据
+        get(id)
+          .then(res => {
+            const { name, address } = res
+            this.form = { name, address }
+            this.$message.success('getFormData')
+            resolve()
+          })
+          .catch(err => {
+            console.log('err', err)
+            reject(err)
+          })
+      })
+    },
+    // [业务逻辑] 提交
+    handleSubmit () {
+      this.$notify({
+        title: 'Submit',
+        message: '提交了表单',
+        type: 'info'
+      })
+    }
+  }
+}

src/router/modules/business.js

@@ -45,6 +45,16 @@ export default {
         ...meta,
         title: '无缓存编辑'
       }
+    },
+    {
+      path: 'issues/142/edit-cache-db/:id',
+      name: `${pre}issues-142-edit-cache-db`,
+      component: () => import('@/pages/demo/business/issues/142/edit-cache-db'),
+      props: true,
+      meta: {
+        ...meta,
+        title: '带缓存编辑 DB'
+      }
     }
   ])('demo-business-')
 }

src/store/modules/d2admin/modules/db.js

@@ -1,5 +1,6 @@
 import db from '@/libs/db.js'
 import util from '@/libs/util.js'
+import { cloneDeep } from 'lodash'
 
 /**
  * @description 检查路径是否存在 不存在的话初始化
@@ -20,6 +21,13 @@ function pathInit ({
   const uuid = util.cookies.get('uuid') || 'ghost-uuid'
   const currentPath = `${dbName}.${user ? `user.${uuid}` : 'public'}${path ? `.${path}` : ''}`
   const value = db.get(currentPath).value()
+  console.group('pathInit')
+  console.log('dbName', dbName)
+  console.log('path', path)
+  console.log('user', user)
+  console.log('defaultValue', defaultValue)
+  console.log('value', value)
+  console.groupEnd()
   if (!(value !== undefined && validator(value))) {
     db
       .set(currentPath, defaultValue)
@@ -66,12 +74,12 @@ export default {
       user = false
     }) {
       return new Promise(resolve => {
-        resolve(db.get(pathInit({
+        resolve(cloneDeep(db.get(pathInit({
           dbName,
           path,
           user,
           defaultValue
-        })).value())
+        })).value()))
       })
     },
     /**
@@ -118,7 +126,7 @@ export default {
      */
     databasePage (context, {
       vm,
-      basis = 'name',
+      basis = 'fullPath',
       user = false
     } = {}) {
       return new Promise(resolve => {
@@ -139,7 +147,7 @@ export default {
      */
     databasePageClear (context, {
       vm,
-      basis = 'name',
+      basis = 'fullPath',
       user = false
     } = {}) {
       return new Promise(resolve => {
@@ -161,7 +169,7 @@ export default {
      */
     pageSet (context, {
       vm,
-      basis = 'name',
+      basis = 'fullPath',
       user = false
     }) {
       return new Promise(resolve => {
@@ -170,7 +178,7 @@ export default {
           path: `$page.${vm.$route[basis]}.$data`,
           user,
           validator: () => false,
-          defaultValue: vm.$data
+          defaultValue: cloneDeep(vm.$data)
         })))
       })
     },
@@ -183,16 +191,16 @@ export default {
      */
     pageGet (context, {
       vm,
-      basis = 'name',
+      basis = 'fullPath',
       user = false
     }) {
       return new Promise(resolve => {
-        resolve(db.get(pathInit({
+        resolve(cloneDeep(db.get(pathInit({
           dbName: 'database',
           path: `$page.${vm.$route[basis]}.$data`,
           user,
-          defaultValue: vm.$data
+          defaultValue: cloneDeep(vm.$data)
-        })).value())
+        })).value()))
       })
     },
     /**
@@ -204,7 +212,7 @@ export default {
      */
     pageClear (context, {
       vm,
-      basis = 'name',
+      basis = 'fullPath',
       user = false
     }) {
       return new Promise(resolve => {