页面持久化大体功能实现

Former-commit-id: 6de284ac144ef2dc9add34aa16502109485a16d2 [formerly 6de284ac144ef2dc9add34aa16502109485a16d2 [formerly 6de284ac144ef2dc9add34aa16502109485a16d2 [formerly 6de284ac144ef2dc9add34aa16502109485a16d2 [formerly 99351410cdef9041c1acbcd105ab7f02e23c4db1 [formerly d70ea9b6ea91dec0463c7e925a8eaab9c1990a6d]]]]]
Former-commit-id: 88212ee98bd64a47532ce9dac84a572f55248a87
Former-commit-id: 017b329b1b91a670b85398e771d34504cc027f26
Former-commit-id: 9d4254f31c10c6e1cc65c65b42847d91e3645566 [formerly b0c0b3fa63225f698741d26af019cee2c9e9258c]
Former-commit-id: 4a4e25525dd02ec2f4a566716a04d5751dc836f8
Former-commit-id: 32994d19e44dd945d144c72134c4aec7b0bc5b13
Former-commit-id: 625b25670c37b0fd33826ddfa845802f1a8e5533
Former-commit-id: ac609aa4a8a3284e927f6b704ccda7786c7df8a6
Former-commit-id: 47d02c0e39e0a6fcba7dfdc98782045193e40c6b

src/pages/demo/playground/db/page-user/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <d2-container>
+    <template slot="header">持久化存储数据（此页面独享）</template>
+    <el-row>
+      <el-col :span="12">
+        <p class="d2-mt-0">增加不重复字段</p>
+        <el-button @click="handleSetRandom">增加</el-button>
+        <p>增加自定义字段</p>
+        <el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
+        <el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
+        <el-button @click="handleSet">增加</el-button>
+        <p>删除字段</p>
+        <el-select
+          v-model="keyNameToDelete"
+          placeholder="请选择要删除的 key">
+          <el-option
+            v-for="item in keyNameList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <p>清空当前用户数据</p>
+        <el-button @click="handleClear">清空</el-button>
+      </el-col>
+      <el-col :span="12">
+        <d2-highlight :code="dataDisplay"/>
+      </el-col>
+    </el-row>
+  </d2-container>
+</template>
+
+<script>
+import day from 'dayjs'
+import { mapActions } from 'vuex'
+export default {
+  data () {
+    return {
+      dataDisplay: '',
+      keyNameToSet: '',
+      valueToSet: '',
+      keyNameList: [],
+      keyNameToDelete: ''
+    }
+  },
+  watch: {
+    keyNameToDelete (value) {
+      if (value) {
+        this.handleDelete(value)
+      }
+    }
+  },
+  mounted () {
+    this.load()
+  },
+  methods: {
+    ...mapActions('d2admin/db', [
+      'databasePage',
+      'databasePageClear'
+    ]),
+    /**
+     * 加载本地数据
+     */
+    async load () {
+      const db = await this.databasePage({
+        vm: this,
+        user: true
+      })
+      this.dataDisplay = JSON.stringify(db.value(), null, 2)
+      this.keyNameList = Object.keys(db.value()).map(k => ({
+        value: k,
+        label: k
+      }))
+    },
+    /**
+     * 删除一个字段
+     */
+    async handleDelete (name) {
+      const db = await this.databasePage({
+        vm: this,
+        user: true
+      })
+      db
+        .unset(name)
+        .write()
+      this.load()
+      this.keyNameToDelete = ''
+    },
+    /**
+     * 清空当前用户的数据
+     */
+    async handleClear () {
+      await this.databasePageClear({
+        vm: this,
+        user: true
+      })
+      this.load()
+    },
+    /**
+     * 添加一个数据
+     */
+    async handleSet () {
+      if (this.keyNameToSet === '') {
+        this.$message.error('字段名不能为空')
+        return
+      }
+      const db = await this.databasePage({
+        vm: this,
+        user: true
+      })
+      db
+        .set(this.keyNameToSet, this.valueToSet)
+        .write()
+      this.load()
+    },
+    /**
+     * 添加一个随机数据
+     */
+    async handleSetRandom () {
+      const id = day().valueOf()
+      const db = await this.databasePage({
+        vm: this,
+        user: true
+      })
+      db
+        .set(id, Math.round(id * Math.random()))
+        .write()
+      this.load()
+    }
+  }
+}
+</script>