db update

Former-commit-id: 3efab3f3c7cf7a34d78ebc1aebcf895fe1832970 [formerly 3efab3f3c7cf7a34d78ebc1aebcf895fe1832970 [formerly 3efab3f3c7cf7a34d78ebc1aebcf895fe1832970 [formerly 3efab3f3c7cf7a34d78ebc1aebcf895fe1832970 [formerly 3608951ec0d14f5fdda5f5c3d74ca1658b4c220a [formerly b3ea1a90fb68b439126a0e163a017e242a0a8dbd]]]]]
Former-commit-id: 452ee4fcd7e53cad75c82f54925db50caf4da311
Former-commit-id: a6b77ca047f33d44ec3cc9c7311ad85fda1cbdaf
Former-commit-id: 625313ff14d3e4a6c4496e0dbbc5d1e2e4624543 [formerly 7b93944ff7f9803377076bd9312f11c82ad60ddd]
Former-commit-id: dab47fcc9792a84172a95410cf8359e31c7c08de
Former-commit-id: e341761c086bb8eb5d842abf411189ec35699361
Former-commit-id: 2bada492361b11dc9e7c5e2eff0baaad7a1aa822
Former-commit-id: 66175c2c3ac72e9b31a66021d4d208c76348e70a
Former-commit-id: b6844ade3e3cdfabb5e58010df6ad0ffa2b2da97

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

@@ -0,0 +1,118 @@
+<template>
+  <d2-container class="page">
+    <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', [
+      'databaseByUser',
+      'databaseByUserClear'
+    ]),
+    /**
+     * 加载本地数据
+     */
+    async load () {
+      const db = await this.databaseByUser()
+      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.databaseByUser()
+      db
+        .unset(name)
+        .write()
+      this.load()
+      this.keyNameToDelete = ''
+    },
+    /**
+     * 清空当前用户的数据
+     */
+    async handleClear () {
+      const db = await this.databaseByUserClear()
+      // db 是已经清空了的数据库对象
+      this.load()
+    },
+    /**
+     * 添加一个数据
+     */
+    async handleSet () {
+      if (this.keyNameToSet === '') {
+        this.$message.error('字段名不能为空')
+        return
+      }
+      const db = await this.databaseByUser()
+      db
+        .set(this.keyNameToSet, this.valueToSet)
+        .write()
+      this.load()
+    },
+    /**
+     * 添加一个随机数据
+     */
+    async handleSetRandom () {
+      const id = day().valueOf()
+      const db = await this.databaseByUser()
+      db
+        .set(id, Math.round(id * Math.random()))
+        .write()
+      this.load()
+    }
+  }
+}
+</script>