Vue项目入门教程11-我的页面及其他

系列文章：

• Vue项目入门教程1-项目介绍
• Vue项目入门教程2-Vue-cli搭建项目
• Vue项目入门教程3-项目改造
• Vue项目入门教程4-插件安装
• Vue项目入门教程5-Svg图标
• Vue项目入门教程6-数据mock
• Vue项目入门教程7-首页布局
• Vue项目入门教程8-首页数据
• Vue项目入门教程9-文章详情页
• Vue项目入门教程10-搜索页面
• Vue项目入门教程11-我的页面及其他
• Vue项目入门教程12-打包发布

简介

该页面展示我的搜索历史
数据从Vuex中获取，只是为了演示Vuex

新建页面组件

在src/views/目录下新建文件user.vue

<template>
  <div>
    user
  </div>
</template>

配置路由

修改src/router/routes.js文件，添加搜索页路由配置

// ...
const User = res => require(['@/views/user'], res)

const routes = [
  // ...
  {
    path: '/user',
    name: 'user',
    component: User
  }
]

export default routes

页面布局

展示使用vux的XTable组件
用dateFormat处理时间戳

<x-table :cell-bordered="false">
  <thead>
    <tr>
      <th>序号</th>
      <th>关键字</th>
      <th>时间</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in searchList" :key="index">
      <td>{{index}}</td>
      <td>{{item.keywords}}</td>
      <td>{{item.time|dateFormat}}</td>
    </tr>
  </tbody>
</x-table>

获取数据

使用mapGetters获取state的搜索历史数据

// ...
import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
    ...mapGetters(['searchList']),
    // ...
  },
  // ...
}

Vuex持久化

刷新页面时，vuex中的数据重新初始化。原来的历史数据就会丢失
我们可以手动将vuex的数据存储到localstorage中，实现数据持久化

插件vuex-persistedstate也提供了一样的功能

• 安装插件：npm i vuex-persistedstate --save

• 修改src/store/index.js文件

// ...
import createPersistedState from 'vuex-persistedstate'
// ...
export default new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

• 这样就实现了数据的持久化。刷新页面数据不会丢失。我们添加一个按钮用来清理历史搜索记录

• 修改src/views/user.vue文件

<box gap="20px 10px">
  <x-button type="primary" @click.native="handleClear">清空记录</x-button>
</box>

import { XHeader, XTable, dateFormat, Box, XButton } from 'vux'
// ...
import { mapGetters, mapMutations } from 'vuex'
// ...
export default {
  // ...
  methods: {
    ...mapMutations(['setSearchList']),
    handleClear() {
      this.setSearchList([])
    }
  }
}

过滤器

这里的时间格式化，不用vux的dateFormat了
使用我们自己编写的过滤器，用来演示过滤器的使用

• 在src/filters/目录下新建文件formatTime.js

// src/filters/formatTime.js
import Vue from 'vue'

// 时间戳转换 yy-mm-dd hh:mm:ss 格式
Vue.filter('formatTime', function(value) {
  if (!value) {
    return ''
  }

  var date = new Date()
  // date.setTime(Number(value) * 1000) // 这里是秒级时间戳
  date.setTime(Number(value)) // 这里是毫秒级时间戳
  var y = date.getFullYear()
  var m = date.getMonth() + 1
  m = m < 10 ? ('0' + m) : m
  var d = date.getDate()
  d = d < 10 ? ('0' + d) : d
  var h = date.getHours()
  h = h < 10 ? ('0' + h) : h
  var minute = date.getMinutes()
  var second = date.getSeconds()
  minute = minute < 10 ? ('0' + minute) : minute
  second = second < 10 ? ('0' + second) : second
  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
})

• 在使用的页面引入，这里修改src/views/user.vue文件，引入过滤器

import '@/filters/formatTime'

• 引入后就可以使用了： <td>{{item.time|formatTime}}</td>

自定义指令

不同的页面展示不同的页面标题
用此功能演示自定义指令的使用

• 在src/directives/目录下添加文件title.js

import Vue from 'vue'

// 自定义标题
Vue.directive('title', {
  // 第一种方式  v-title="'haha'"  这样使用---传参方法
  bind(el, binding, vunode) {
    document.title = binding.value
  },
  update(el, binding, vunode) {
    document.title = binding.value
  }
  // 第二种方式 v-title data-title="所需要的标题"  这样使用
  // inserted: function (el) {
  //   document.title = el.dataset.title
  // },
  // update: function (el) {
  //   document.title = el.dataset.title
  // }
})

• 修改src/main.js文件，引入该自定义指令

// 自定义指令
import './directives/title'

• 修改每个页面组件，添加自定义指令v-title

• src/views/index.vue：<div class="page" v-title="'首页'">
• src/views/search.vue：<div class="page" v-title="'搜索'">
• src/views/user.vue：<div class="page" v-title="'搜索历史'">
• src/views/article.vue：<div class="page" v-title="article.title?article.title:'文章详情'">