Vue.js 项目重构，轻松实现上拉加载滚动位置还原

前言

上一篇《Vue.js 轻松实现页面后退时，还原滚动位置》只是简单的实现了路由切换时进行的滚动位置还原，很多朋友就来问上拉加载怎么实现啊！于是我想起了以前做过一个叫vue-cnode的项目，于是花了两天时间进行了重构，完全的移除了 Vuex，使用了Vuet来做为状态的管理工具。如果关注Vuet的朋友就会发现，版本更新得好快，简直就是版本帝啊！！！其实Vuet的版本升级，都是向下兼容的，每次的版本发布都会经过完整的单元测试和 e2e 测试，极大的保证了发布版本的稳定性。

项目源码

• Vuet状态管理工具
• vue-cnode Github 和效果预览地址

需求分析

• 记录上拉请求时的页数
• 页面后退时，还原之前列表页面的状态
• 列表分类切换时，进行状态重置
• 从列表 A 点击详情 A，页面后退，重新打开详情 A，还原之前访问详情 A 状态
• 从列表 A 点击详情 A，页面后退，重新打开详情 B，清除详情 A 的状态，初始化详情 B 的状态

安装

npm install --save vuet

Vuet 实例

import Vue from 'vue'
import Vuet from 'vuet'
import utils from 'utils'
import http from 'http'

Vue.use(Vuet)

export default new Vuet({
  pathJoin: '-', // 定义模块的连接符
  modules: {
    topic: {
      create: {
        data () {
          return {
            title: '', // 标题
            tab: '', // 发表的板块
            content: '' // 发表的内容
          }
        },
        manuals: {
          async create ({ state }) {
            if (!state.title) {
              return utils.toast('标题不能为空')
            } else if (!state.tab) {
              return utils.toast('选项不能为空')
            } else if (!state.content) {
              return utils.toast('内容不能为空')
            }
            const res = await http.post(`/topics`, {
              ...state
            })
            if (res.success) {
              this.reset()
            } else {
              utils.toast(res.error_msg)
            }
            return res
          }
        }
      },
      /********* 实现列表上拉加载滚动位置还原的核心代码开始 *************/
      list: {
        data () {
          return {
            data: [], // 列表存储的数据
            loading: true, // 数据正在加载中
            done: false, // 数据是否已经全部加载完成
            page: 1 // 加载的页数
          }
        },
        async fetch ({ state, route, params, path }) {
          // 注，在 vuet 0.1.2 以上版本，会多带一个 params.routeWatch 参数，我们可以根据这个来判断页面是否发生了变化
          if (params.routeWatch === true) { // 路由发生了变化，重置模块状态
            this.reset(path)
          } else if (params.routeWatch === false) { // 路由没有变化触发的请求，可能是从详情返回到列表
            return {}
          }
          // params.routeWatch 没有参数，则是上拉加载触发的调用
          const { tab = '' } = route.query
          const query = {
            tab,
            mdrender: false,
            limit: 20,
            page: state.page
          }
          const res = await http.get('/topics', query)
          const data = params.routeWatch ? res.data : [...state.data, ...res.data]
          return {
            data, // 更新模块的列表数据
            page: ++state.page, // 每次请求成功后，页数+1
            loading: false, // 数据加载完成
            done: res.data.length < 20 // 判断列表的页数是否全部加载完成
          }
        }
      },
      /********* 实现列表上拉加载滚动位置还原的核心代码结束 *************/
      detail: {
        data () {
          return {
            data: {
              id: null,
              author_id: null,
              tab: null,
              content: null,
              title: null,
              last_reply_at: null,
              good: false,
              top: false,
              reply_count: 0,
              visit_count: 0,
              create_at: null,
              author: {
                loginname: null,
                avatar_url: null
              },
              replies: [],
              is_collect: false
            },
            existence: true,
            loading: true,
            commentId: null
          }
        },
        async fetch ({ route }) {
          const { data } = await http.get(`/topic/${route.params.id}`)
          if (data) {
            return {
              data,
              loading: false
            }
          }
          return {
            existence: false,
            loading: false
          }
        }
      }
    },
    user: { // 登录用户的模块
      self: {
        data () {
          return {
            data: JSON.parse(localStorage.getItem('vue_cnode_self')) || {
              avatar_url: null,
              id: null,
              loginname: null,
              success: false
            }
          }
        },
        manuals: {
          async login ({ state }, accesstoken) { // 用户登录方法
            const res = await http.post(`/accesstoken`, { accesstoken })
            if (typeof res === 'object' && res.success) {
              state.data = res
              localStorage.setItem('vue_cnode_self', JSON.stringify(res))
              localStorage.setItem('vue_cnode_accesstoken', accesstoken)
            }
            return res
          },
          signout () { // 用户退出方法
            localStorage.removeItem('vue_cnode_self')
            localStorage.removeItem('vue_cnode_accesstoken')
            this.reset()
          }
        }
      },
      detail: {
        data () {
          return {
            data: {
              loginname: null,
              avatar_url: null,
              githubUsername: null,
              create_at: null,
              score: 0,
              recent_topics: [],
              recent_replies: []
            },
            existence: true,
            loading: true,
            tabIndex: 0
          }
        },
        async fetch ({ route }) {
          const { data } = await http.get(`/user/${route.params.username}`)
          if (data) {
            return {
              data,
              loading: false
            }
          }
          return {
            existence: false,
            loading: false
          }
        }
      },
      messages: {
        data () {
          return {
            data: {
              has_read_messages: [],
              hasnot_read_messages: []
            },
            loading: true
          }
        },
        async fetch () {
            // 用户未登录，拦截请求
          if (!this.getState('user-self').data.id) return
          const { data } = await http.get(`/messages`, { mdrender: true })
          return {
            data
          }
        },
        count: {
          data () {
            return {
              data: 0
            }
          },
          async fetch () {
            // 用户未登录，拦截请求
            if (!this.getState('user-self').data.id) return
            const res = await http.get('/message/count')
            if (!res.data) return
            return {
              data: res.data
            }
          }
        }
      }
    }
  }
})

在Vuet实例创建完成后，我们就可以在组件中连接我们的Vuet了。

• 首页列表

<template>
  <div>
    <nav class="nav">
      <ul flex="box:mean">

        <li v-for="item in tabs" :class="{ active: item.tab === ($route.query.tab || '') }">
          <router-link :to="{ name: 'index', query: { tab: item.tab } }">{{ item.title }}</router-link>
        </li>
      </ul>
    </nav>
    <!-- 
        注意了，由于我的页面布局是一个局部滚动条，所以需要指定一个 name
        如果你的页面是全局滚动条，设置指令为
        v-route-scroll.window="{ path: 'topic-list' }"
    -->
    <v-content v-route-scroll="{ path: 'topic-list', name: 'content' }">
      <ul class="list">
        <li v-for="item in list.data" key="item.id">
          <router-link :to="{ name: 'topic-detail', params: { id: item.id } }">
            <div class="top" flex="box:first">
              <div class="headimg" :style="{ backgroundImage: 'url(' + item.author.avatar_url + ')' }"></div>
              <div class="box" flex="dir:top">
                <strong>{{ item.author.loginname }}</strong>
                <div flex>
                  <time>{{ item.create_at | formatDate }}</time>
                  <span class="tag">#分享#</span>
                </div>
              </div>
            </div>
            <div class="common-typeicon" flex v-if="item.top || item.good">
              <div class="icon" v-if="item.good">
                <i class="iconfont icon-topic-good"></i>
              </div>
              <div class="icon" v-if="item.top">
                <i class="iconfont icon-topic-top"></i>
              </div>
            </div>
            <div class="tit">{{ item.title }}</div>
            <div class="expand" flex="box:mean">
              <div class="item click" flex="main:center cross:center">
                <i class="iconfont icon-click"></i>
                <div class="num">{{ item.visit_count > 0 ? item.visit_count : '暂无阅读' }}</div>
              </div>
              <div class="item reply" flex="main:center cross:center">
                <i class="iconfont icon-comment"></i>
                <div class="num">{{ item.reply_count > 0 ? item.reply_count : '暂无评论' }}</div>
              </div>
              <div class="item last-reply" flex="main:center cross:center">
                <time class="time">{{ item.last_reply_at | formatDate }}</time>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
      <v-loading :done="list.done" :loading="list.loading" @seeing="$vuet.fetch('topic-list')"></v-loading>
    </v-content>
    <v-footer></v-footer>
  </div>
</template>
<script>
  import { mapModules, mapRules } from 'vuet'

  export default {
    mixins: [
      mapModules({ list: 'topic-list' }), // 连接我们定义的 Vuet.js 的状态
      mapRules({ route: 'topic-list' }) // 使用 Vuet.js 内置的 route 规则来对页面数据和滚动位置进行管理
    ],
    data () {
      return {
        tabs: [
          {
            title: '全部',
            tab: ''
          },
          {
            title: '精华',
            tab: 'good'
          },
          {
            title: '分享',
            tab: 'share'
          },
          {
            title: '问答',
            tab: 'ask'
          },
          {
            title: '招聘',
            tab: 'job'
          }
        ]
      }
    }
  }
</script>

• 页面详情

<template>
  <div>
    <v-header title="主题">
      <div slot="left" class="item" flex="main:center cross:center" v-on:click="$router.go(-1)">
        <i class="iconfont icon-back"></i>
      </div>
    </v-header>
    <!--
        设置详情的局部滚动条
    -->
    <v-content style="bottom: 0;" v-route-scroll="{ path: 'topic-detail', name: 'content' }">
      <v-loading v-if="detail.loading"></v-loading>
      <v-data-null v-if="!detail.existence" msg="话题不存在"></v-data-null>
      <template v-if="!detail.loading && detail.existence">
        <div class="common-typeicon" flex v-if="data.top || data.good">
          <div class="icon" v-if="data.good">
            <i class="iconfont icon-topic-good"></i>
          </div>
          <div class="icon" v-if="data.top">
            <i class="iconfont icon-topic-top"></i>
          </div>
        </div>

        <ul class="re-list">
          <!-- 楼主信息 start -->
          <li flex="box:first">
            <div class="headimg">
              <router-link class="pic" :to="{ name: 'user-detail', params: { username: author.loginname } }" :style="{ backgroundImage: 'url(' + author.avatar_url + ')' }"></router-link>
            </div>
            <div class="bd">
              <div flex>
                <router-link flex-box="0" :to="{ name: 'user-detail', params: { username: author.loginname } }">{{ author.loginname }}</router-link>
                <time flex-box="1">{{ data.create_at | formatDate }}</time>
                <div flex-box="0" class="num">#楼主</div>
              </div>
            </div>
          </li>
          <!-- 楼主信息 end -->
          <!-- 主题信息 start -->
          <li>
            <div class="datas">
              <div class="tit">{{ data.title }}</div>
              <div class="bottom" flex="main:center">
                <div class="item click" flex="main:center cross:center">
                  <i class="iconfont icon-click"></i>
                  <div class="num">{{ data.visit_count }}</div>
                </div>
                <div class="item reply" flex="main:center cross:center">
                  <i class="iconfont icon-comment"></i>
                  <div class="num">{{ data.reply_count }}</div>
                </div>
              </div>
            </div>
            <div class="markdown-body" v-html="data.content"></div>
          </li>
          <!-- 主题信息 end -->
          <li class="replies-count" v-if="replies.length">
            共(<em>{{ replies.length }}</em>)条回复
          </li>
          <!-- 主题评论 start -->
          <li v-for="(item, $index) in replies">
            <div flex="box:first">
              <div class="headimg">
                <router-link class="pic" :to="{ name: 'user-detail', params: { username: item.author.loginname } }" :style="{ backgroundImage: 'url(' + item.author.avatar_url + ')' }"></router-link>
              </div>
              <div class="bd">
                <div flex>
                  <router-link flex-box="0" :to="{ name: 'user-detail', params: { username: item.author.loginname } }">{{ item.author.loginname }}</router-link>
                  <time flex-box="1">{{ item.create_at | formatDate }}</time>
                  <div flex-box="0" class="num">#{{ $index + 1 }}</div>
                </div>
                <div class="markdown-body" v-html="item.content"></div>
                <div class="bottom" flex="dir:right cross:center">
                  <div class="icon" @click="commentShow(item, $index)">
                    <i class="iconfont icon-comment-topic"></i>
                  </div>
                  <div class="icon" :class="{ fabulous: testThing(item.ups) }" v-if="item.author.loginname !== user.data.loginname" @click="fabulousItem(item)">
                    <i class="iconfont icon-comment-fabulous"></i>
                    <em v-if="item.ups.length">{{ item.ups.length }}</em>
                  </div>
                </div>
              </div>
            </div>
            <reply-box v-if="detail.commentId === item.id" :loginname="item.author.loginname" :replyId="item.id"></reply-box>
          </li>
          <!-- 主题评论 end -->
        </ul>
        <div class="reply" v-if="user.data.id">
          <reply-box @success="$vuet.fetch('topic-detail')"></reply-box>
        </div>
        <div class="tip-login" v-if="!user.data.id">
          你还未登录，请先
          <router-link to="/login">登录</router-link>
        </div>
      </template>
    </v-content>
  </div>
</template>
<script>
  import http from 'http'
  import replyBox from './reply-box'
  import { mapModules, mapRules } from 'vuet'

  export default {
    mixins: [
      // 连接详情和登录用户模块
      mapModules({ detail: 'topic-detail', user: 'user-self' }),
      // 一样是使用 route 规则对页面的数据进行管理
      mapRules({ route: 'topic-detail' })
    ],
    components: { replyBox },
    computed: {
      data () {
        return this.detail.data
      },
      author () {
        return this.detail.data.author
      },
      replies () {
        return this.detail.data.replies
      }
    },
    methods: {
      testThing (ups) { // 验证是否点赞
        return ups.indexOf(this.user.data.id || '') > -1
      },
      fabulousItem ({ ups, id }) { // 点赞
        if (!this.user.data.id) return this.$router.push('/login')
        var index = ups.indexOf(this.user.data.id)
        if (index > -1) {
          ups.splice(index, 1)
        } else {
          ups.push(this.user.data.id)
        }
        http.post(`/reply/${id}/ups`)
      },
      commentShow (item) { // 显示隐藏回复框
        if (!this.user.data.id) return this.$router.push('/login')
        this.detail.commentId = this.detail.commentId === item.id ? null : item.id
      }
    }
  }

</script>

总结

因为篇幅有限，所以只列出了列表和详情的代码，大家有兴趣深入的话，可以看下vue-cnode的代码。这是基于Vuet进行状态管理的完整项目，包含了用户的登录退出，路由页面，滚动位置还原，帖子编辑状态保存等等，麻雀虽小，却是五脏俱全。