媒介
上一篇《Vue.js轻松完成页面退却时，复原转动位置》只是简朴的完成了路由切换时举行的转动位置复原，许多朋侪就来问上拉加载怎样完成啊！因而我想起了之前做过一个叫vue-cnode的项目，因而花了两天时候举行了重构，完全的移除了Vuex，运用了Vuet来做为状况的治理工具。假如关注Vuet的朋侪就会发明，版本更新得好快，几乎就是版本帝啊！！！实在Vuet的版本晋级，都是向下兼容的，每次的版本宣布都邑经由完全的单元测试和e2e测试，极大的保证了宣布版本的稳定性。
项目源码
需求剖析
记录上拉要求时的页数
页面退却时，复原之前列表页面的状况
列表分类切换时，举行状况重置
从列表A点击概况A，页面退却，从新翻开概况A，复原之前接见概况A状况
从列表A点击概况A，页面退却，从新翻开概况B，消灭概况A的状况，初始化概况B的状况
装置
npm install --save vuetVuet实例
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举行状况治理的完全项目，包含了用户的登录退出，路由页面，转动位置复原，帖子编辑状况保留等等，麻雀虽小，倒是五脏俱全。
