20191206

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
+    "localforage": "^1.7.3",
     "view-design": "^4.0.2",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" :class="theme">
+  <div id="app" :class="getTheme">
     <Layout class="box">
         <Sider class="sider" width="70"><ZYSider /></Sider>
         <Layout>
@@ -12,6 +12,8 @@
   </div>
 </template>
 <script>
+import { setting } from '@/plugin/localforage/'
+import { mapGetters, mapActions } from 'vuex'
 import ZYSider from '@/components/zy_sider.vue'
 import ZYHeader from '@/components/zy_header.vue'
 export default {
@@ -20,15 +22,37 @@ export default {
     return {}
   },
   computed: {
-    theme () {
-      return this.$store.getters.getTheme
-    }
+    ...mapGetters([
+      'getTheme'
+    ])
   },
   components: {
     ZYSider,
     ZYHeader
   },
-  methods: {}
+  methods: {
+    ...mapActions([
+      'changeTheme'
+    ])
+  },
+  beforeCreate () {
+    setting.find('theme').then(e => {
+      if (!e) {
+        this.changeTheme('light')
+      } else {
+        this.changeTheme(e)
+      }
+    })
+  },
+  created () {
+    // db.find('theme').then(e => {
+    //   if (!e) {
+    //     this.changeTheme('light')
+    //   } else {
+    //     this.changeTheme(e)
+    //   }
+    // })
+  }
 }
 </script>
 

src/main.js

@@ -3,8 +3,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import '@/plugin/iview/'
-// import '@/assets/theme/dark.scss'
-// import '@/assets/theme/light.scss'
+// import '@/plugin/localforage/'
 
 Vue.config.productionTip = false
 

src/plugin/localforage/collection_db.js

@@ -0,0 +1,65 @@
+import lf from 'localforage'
+
+const collection = lf.createInstance({
+  name: 'ZY',
+  storeName: 'collection',
+  version: '1.0',
+  description: 'ZY Player collection DB'
+})
+
+export default {
+  set (key, value) {
+    return new Promise((resolve, reject) => {
+      collection.setItem(key, value).then(e => {
+        resolve(e)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  remove (key) {
+    return new Promise((resolve, reject) => {
+      collection.removeItem(key).then(() => {
+        resolve(true)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  clear () {
+    return new Promise((resolve, reject) => {
+      collection.clear().then(() => {
+        resolve(true)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  find (key) {
+    return new Promise((resolve, reject) => {
+      collection.getItem(key).then(value => {
+        resolve(value)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  all () {
+    return new Promise((resolve, reject) => {
+      collection.keys().then(value => {
+        resolve(value)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  length () {
+    return new Promise((resolve, reject) => {
+      collection.length().then(value => {
+        resolve(value)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  }
+}

src/plugin/localforage/index.js

@@ -0,0 +1,5 @@
+import setting from './setting_db'
+import collection from './collection_db'
+export {
+  setting, collection
+}

src/plugin/localforage/setting_db.js

@@ -0,0 +1,47 @@
+import lf from 'localforage'
+
+const setting = lf.createInstance({
+  name: 'ZY',
+  storeName: 'setting',
+  version: '1.0',
+  description: 'ZY Player setting DB'
+})
+
+export default {
+  set (key, value) {
+    return new Promise((resolve, reject) => {
+      setting.setItem(key, value).then(e => {
+        resolve(e)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  remove (key) {
+    return new Promise((resolve, reject) => {
+      setting.removeItem(key).then(() => {
+        resolve(true)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  clear () {
+    return new Promise((resolve, reject) => {
+      setting.clear().then(() => {
+        resolve(true)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
+  find (key) {
+    return new Promise((resolve, reject) => {
+      setting.getItem(key).then(value => {
+        resolve(value)
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  }
+}

src/store.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import { setting } from '@/plugin/localforage/'
 
 Vue.use(Vuex)
 
@@ -34,6 +35,11 @@ export default new Vuex.Store({
   actions: {
     addCollection: (payload) => {
       localStorage.collection = payload
+    },
+    changeTheme: ({ commit }, payload) => {
+      setting.set('theme', payload).then(e => {
+        commit('SET_THEME', e)
+      })
     }
   }
 })

src/views/Settings.vue

@@ -1,16 +1,31 @@
 <template>
   <Row>
-    <Button type="primary" @click="switchTheme('light')">light</Button>
-    <Button type="primary" @click="switchTheme('dark')">Dark</Button>
+    <Button type="primary" @click="changeTheme('light')">light</Button>
+    <Button type="primary" @click="changeTheme('dark')">Dark</Button>
+    <Button type="primary" @click="add()">Add</Button>
   </Row>
 </template>
 <script>
+import { mapActions } from 'vuex'
+import { collection } from '@/plugin/localforage/'
 export default {
   name: 'settings',
   methods: {
-    switchTheme (e) {
-      this.$store.commit('SET_THEME', e)
+    ...mapActions([
+      'changeTheme'
+    ]),
+    add () {
+      // let data = {
+      //   name: '冰雪奇缘',
+      //   detail: '',
+      //   category: '动画片',
+      //   time: '20191206 12:12:45'
+      // }
+      collection.all().then(e => {
+        console.log(e)
+      })
     }
-  }
+  },
+  created () {}
 }
 </script>

yarn.lock

@@ -5840,6 +5840,13 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npm.taobao.org/lie/download/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
 lie@~3.3.0:
   version "3.3.0"
   resolved "https://registry.npm.taobao.org/lie/download/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
@@ -5905,6 +5912,13 @@ loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
+localforage@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.npm.taobao.org/localforage/download/localforage-1.7.3.tgz#0082b3ca9734679e1bd534995bdd3b24cf10f204"
+  integrity sha1-AIKzypc0Z54b1TSZW907JM8Q8gQ=
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/locate-path/download/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"