用户本地数据操作方法

Former-commit-id: d8a0ab287f85f0a43be0dd3f968b97378753f5a4 [formerly d1f9d1371b0b48ce87ffd5d06227c26ec80d271c] [formerly d8a0ab287f85f0a43be0dd3f968b97378753f5a4 [formerly d1f9d1371b0b48ce87ffd5d06227c26ec80d271c] [formerly d8a0ab287f85f0a43be0dd3f968b97378753f5a4 [formerly d1f9d1371b0b48ce87ffd5d06227c26ec80d271c] [formerly d1f9d1371b0b48ce87ffd5d06227c26ec80d271c [formerly 21b6f83197da6dfaec858c777662b7df5e3a4f21 [formerly ddaee096853023cceb9c54be5e63d1ae012b262d]]]]] Former-commit-id: 4383f412f9bb5c0e61732950d80ee377720762af Former-commit-id: 4255437df19815fa4c5ab37f0262b8a882977bfa Former-commit-id: b6b46e399c09e6e39707bf20fa54289809e26503 [formerly 9f48cf391064b5c870505fd2ecae73dbc8ebff47] Former-commit-id: d2c1068b401e2ecce6f707828503a954137823cf Former-commit-id: 88606e8a844e3dc377776689546e25f51625b9a8 Former-commit-id: 50cec2b9bcbd23a7976137fcb00ce99ed2e4185b Former-commit-id: 0595263161abf9c860670be3f3fb596594e66b0a Former-commit-id: 76bbc5ac1630577073aedc6fa0de4bddb93024f5
2018-07-24 15:26:39 +08:00
parent 35d1e3b755
commit dcfce2cb0c
9 changed files with 155 additions and 9 deletions
--- a/src/pages/demo/playground/db/all/index.vue
+++ b/src/pages/demo/playground/db/all/index.vue
--- a/src/pages/demo/playground/db/user/index.vue
+++ b/src/pages/demo/playground/db/user/index.vue
@@ -0,0 +1,134 @@
+<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 { mapMutations } from 'vuex'
+export default {
+  data () {
+    return {
+      dataDisplay: '',
+      keyNameToSet: '',
+      valueToSet: '',
+      keyNameList: [],
+      keyNameToDelete: ''
+    }
+  },
+  watch: {
+    keyNameToDelete (value) {
+      if (value) {
+        this.handleDelete(value)
+      }
+    }
+  },
+  mounted () {
+    this.load()
+  },
+  methods: {
+    ...mapMutations([
+      'd2adminUtilUserDatabase',
+      'd2adminUtilUserDatabaseClear'
+    ]),
+    /**
+     * 加载本地数据
+     */
+    load () {
+      this.d2adminUtilUserDatabase(database => {
+        this.dataDisplay = JSON.stringify(database.value(), null, 2)
+        this.keyNameList = Object.keys(database.value()).map(k => ({
+          value: k,
+          label: k
+        }))
+      })
+    },
+    /**
+     * 删除一个字段
+     */
+    handleDelete (name) {
+      this.d2adminUtilUserDatabase(database => {
+        database
+          .unset(name)
+          .write()
+      })
+      this.load()
+      this.keyNameToDelete = ''
+    },
+    /**
+     * 清空当前用户的数据
+     */
+    handleClear () {
+      // this.d2adminUtilUserDatabase(database => {
+      //   this.keyNameList.forEach(name => {
+      //     database.unset(name.value).write()
+      //   })
+      // })
+      this.d2adminUtilUserDatabaseClear()
+      this.load()
+    },
+    /**
+     * 添加一个数据
+     */
+    handleSet () {
+      if (this.keyNameToSet === '') {
+        this.$message.error('字段名不能为空')
+        return
+      }
+      this.d2adminUtilUserDatabase(database => {
+        database
+          .set(this.keyNameToSet, this.valueToSet)
+          .write()
+      })
+      this.load()
+    },
+    /**
+     * 添加一个随机数据
+     */
+    handleSetRandom () {
+      this.d2adminUtilUserDatabase(database => {
+        const id = day().valueOf()
+        database
+          .set(id, Math.round(id * Math.random()))
+          .write()
+      })
+      this.load()
+    }
+  }
+}
+</script>