码迷,mamicode.com
首页 > 其他好文 > 详细

vue-music 关于Search(搜索页面)-- 搜索历史

时间:2018-06-13 23:41:31      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:数组   can   绑定   ice   sele   函数   app   script   confirm   

搜索历史展示每一次搜索过,并选中的关键字,保存数据到数组。搜索历史数据是需要在多个组件中共享的,所以保存在vuex 中 searchHistory 数组中,保存触发在搜索列表点击选中之后派发事件到search.vue 中,search.vue 监听事件并提交actions改变共享数组,改变vuex 中共享数据之前需要存到本地缓存 Localstorage 中,在本地存储 中判断如果当期历史搜索数据在数据中已经有则提前插入到第一位,没有则添加到数组中存储

在common 中 创建cache.js 里面写所有相关存储的逻辑代码。使用goog-storage 库 方便调用localstorage 相关api

保存本地搜索历史首先获取访问本地存储中的key 如果已经有值则赋值,没有则赋值为空数组,插入新数据前先与当前历史数据列表比较有没有相同数据,有则且在第一个位置原样返回该数据,有且大于第一个位置则删除该数据,然后再插入,并且插入大于最大限制条数的时候,删除数组的最后一个元素。最后调用storage.set(key,val) 存到本地缓存中。并且 在action 中提交到vuex数据中

cache.js

import storage from ‘good-storage‘

const SEARCH_KEY = ‘__search__‘
const SEARCH_MAX_LEN = 15

// 检索函数,判断新增的是否存在
function insertArray(arr, val, compare, maxLen) {
  const index = arr.findIndex(compare)
  if (index === 0) {
    return
  }
  if (index > 0) {
    arr.splice(index, 1)
  }
  arr.unshift(val)
  if (maxLen && arr.length > maxLen) {
    arr.pop()
  }
}

export function saveSearch(query) {
  let searches = storage.get(SEARCH_KEY, [])
  insertArray(searches, query, (item) => {
    return item === query
  }, SEARCH_MAX_LEN)
  storage.set(SEARCH_KEY, searches)
  return searches
}
  export function loadSearch() {    return storage.get(SEARCH_KEY, [])  }

actions.js

export const saveSearchHistory = function({commit},query){
  commit(types.SET_SEARCH_HISTORY,saveSearch(query));
} 

state.js

import {loadSearch} from ‘common/js/cache.js‘;

const state = {
    singer:{},
    playing:false,
    fullScreen:false,
    playList:[],
    sequenceList:[],
    mode:playMode.sequence,
    currentIndex:-1,
    disc:{},
    topList:{},
    searchHistory:loadSearch()    //默认值从本地存储中获取
}
export default state

将获取来的vuex数据遍历到历史数据列表组件上search-list 组件

<template>
  <div class="search-list" v-show="searches.length">
    <ul>
      <li :key="item" class="search-item" @click="selectItem(item)" v-for="item in searches">
        <span class="text">{{item}}</span>
        <span class="icon" @click.stop="deleteOne(item)">
          <i class="icon-delete"></i>
        </span>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      searches: {
        type: Array,
        default: []
      }
    },
    methods: {
      selectItem(item) {
        this.$emit(‘select‘, item)
      },
      deleteOne(item) {
        this.$emit(‘delete‘, item)
      }
    }
  }
</script>

组件上派发一个选中本条历史数据和删除本条历史数据的方法,选中本条可以引用addQuery 方法将本条数据再次填在input 搜索框中。删除本条调用action 方法

function deleteFromArray(arr, compare) {
  const index = arr.findIndex(compare)
  if (index > -1) {
    arr.splice(index, 1)
  }
}

// 删除后的数组存到本地
export function deleteSearch(query) {
  let searches = storage.get(SEARCH_KEY, [])
  deleteFromArray(searches, (item) => {
    return item === query
  })
  storage.set(SEARCH_KEY, searches)
  return searches
}

------------------ actions.js -----

export const deleteSearchHistory = function({commit},query){
  commit(types.SET_SEARCH_HISTORY,deleteSearch(query));
}

点击清除所有历史数据方法和删除本条的逻辑一样,需要提交actions 清除本地缓存数据,并返回一个空数组赋值给vuex 数据,然后组件通过mapActions 调用该方法清空历史数据

// 清除数据
export function clearSearch() {
  storage.remove(SEARCH_KEY)
  return []
}

// 提交空数组
export const clearSearchHistory = function({commit}){
  commit(types.SET_SEARCH_HISTORY,clearSearch());
}

search.vue 引入mapActions ,代理调用clearSearchHistory 方法

import {mapActions,mapGetters} from ‘vuex‘

...mapActions([
  ‘saveSearchHistory‘,
  ‘deleteSearchHistory‘,
  ‘clearSearchHistory‘
])

// 绑定派发事件   
deleteAll(){
  this.clearSearchHistory();
},

//!注意这里可以直接将代理的方法直接绑定到监听事件中,可省略再次写方法名

// 之前是
<span class="clear" @click="deleteAll">

// 可改为
<span class="clear" @click="clearSearchHistory">

优化体验,点击清空所以数据的时候弹窗确认删除才删除

建立confirm 组件,向外派发点击确认按钮时的事件,这里就直接把确认的派发事件写成 clearSearchHistory 。取消的话影藏自身就行

// confirm 组件<template>
  <transition name="confirm-fade">
    <div class="confirm" v-show="showFlag" @click.stop>
      <div class="confirm-wrapper">
        <div class="confirm-content">
          <p class="text">{{text}}</p>
          <div class="operate">
            <div @click="cancel" class="operate-btn left">{{cancelBtnText}}</div>
            <div @click="confirm" class="operate-btn">{{confirmBtnText}}</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      text: {
        type: String,
        default: ‘‘
      },
      confirmBtnText: {
        type: String,
        default: ‘确定‘
      },
      cancelBtnText: {
        type: String,
        default: ‘取消‘
      }
    },
    data() {
      return {
        showFlag: false    // 内部变量控制其显示影藏
      }
    },
    methods: {
      show() {
        this.showFlag = true
      },
      hide() {
        this.showFlag = false
      },
      cancel() {
        this.hide()
        this.$emit(‘cancel‘)
      },
      confirm() {
        this.hide()
        this.$emit(‘confirm‘)
      }
    }
  }
</script>

 

vue-music 关于Search(搜索页面)-- 搜索历史

标签:数组   can   绑定   ice   sele   函数   app   script   confirm   

原文地址:https://www.cnblogs.com/catbrother/p/9180406.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!