缓存播放列表与清空列表

hzzly · Jun 4, 2017 · 39488ed · 39488ed
1 parent 5891d47
commit 39488ed
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/src/components/listenList.vue b/src/components/listenList.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="listen-list">
         <div class="num">
-            <i class="icon">&#xe6ae;</i> 循环播放({{listenLists.length}}首)
+            <span><i class="icon">&#xe6ae;</i> 循环播放({{listenLists.length}}首)</span>
+            <span @click="_deleteListenLists"><i class="icon">&#xe612;</i> 清空</span>
         </div>
         <div class="list">
             <transition-group name="slide"
@@ -65,6 +66,9 @@ export default {
                 return
             }
             this.$store.dispatch('deleteMusic', index)
+        },
+        _deleteListenLists() {
+            this.$store.dispatch('removeListenLists')
         }
     },
     computed: {
@@ -97,15 +101,19 @@ export default {
     color: #fff;
     display: flex;
     flex-direction: column;
-
     .num {
+        display: flex;
+        justify-content: space-between;
         height: px2rem(90px);
         line-height: px2rem(90px);
         font-size: px2rem(28px);
-        margin: 0 px2rem(15px);
-        .icon {
-            font-size: px2rem(34px);
+        span {
+            padding: 0 px2rem(30px);
+            .icon {
+                font-size: px2rem(34px);
+            }
         }
+        
     }
     .list {
         flex: 1;

diff --git a/src/vuex/modules/music.js b/src/vuex/modules/music.js
@@ -6,7 +6,7 @@ const state = {
     classicalLists: [],
     lightLists: [],
     radioLists: [],
-    listenLists: [
+    listenLists: JSON.parse(localStorage.musiclists) || [
         {
             "name": "刚好遇见你",
             "id": 439915614,
@@ -61,6 +61,9 @@ const actions = {
     addListenLists({ commit }, music) {
         commit(types.ADD_LISTEN_LISTS, music)
     },
+    removeListenLists({ commit }) {
+        commit(types.REMOVE_LISTEN_LISTS)
+    },
     //获取热门流行歌曲
     getPopularLists({ commit }) {
         commit(types.COM_SHOW_LOADING, true)
@@ -182,6 +185,11 @@ const getters = {
 const mutations = {
     [types.ADD_LISTEN_LISTS](state, music) {
         state.listenLists.push(music)
+        localStorage.musiclists = JSON.stringify(state.listenLists)
+    },
+    [types.REMOVE_LISTEN_LISTS](state) {
+        state.listenLists = []
+        localStorage.musiclists = []
     },
     [types.GET_POPULAR_LISTS](state, res) {
         state.popularLists = res

diff --git a/src/vuex/types.js b/src/vuex/types.js
@@ -1,5 +1,6 @@
 export const GET_MUSIC_LISTS = 'GET_MUSIC_LISTS'   //获取音乐列表
 export const ADD_LISTEN_LISTS = 'ADD_LISTEN_LISTS'
+export const REMOVE_LISTEN_LISTS = 'REMOVE_LISTEN_LISTS'
 export const GET_POPULAR_LISTS = 'GET_POPULAR_LISTS'
 export const GET_CLASSICAL_LISTS = 'GET_CLASSICAL_LISTS'
 export const GET_LIGHT_LISTS = 'GET_LIGHT_LISTS'