摘要：這是基于進(jìn)行狀態(tài)管理的完整項(xiàng)目，包含了用戶的登錄退出，路由頁(yè)面，滾動(dòng)位置還原，帖子編輯狀態(tài)保存等等，麻雀雖小，卻是五臟俱全。

上一篇《Vue.js輕松實(shí)現(xiàn)頁(yè)面后退時(shí)，還原滾動(dòng)位置》只是簡(jiǎn)單的實(shí)現(xiàn)了路由切換時(shí)進(jìn)行的滾動(dòng)位置還原，很多朋友就來(lái)問(wèn)上拉加載怎么實(shí)現(xiàn)啊！于是我想起了以前做過(guò)一個(gè)叫vue-cnode的項(xiàng)目，于是花了兩天時(shí)間進(jìn)行了重構(gòu)，完全的移除了Vuex，使用了Vuet來(lái)做為狀態(tài)的管理工具。如果關(guān)注Vuet的朋友就會(huì)發(fā)現(xiàn)，版本更新得好快，簡(jiǎn)直就是版本帝啊！！！其實(shí)Vuet的版本升級(jí)，都是向下兼容的，每次的版本發(fā)布都會(huì)經(jīng)過(guò)完整的單元測(cè)試和e2e測(cè)試，極大的保證了發(fā)布版本的穩(wěn)定性。

Vuet狀態(tài)管理工具

vue-cnode Github和效果預(yù)覽地址

記錄上拉請(qǐng)求時(shí)的頁(yè)數(shù)

頁(yè)面后退時(shí)，還原之前列表頁(yè)面的狀態(tài)

列表分類切換時(shí)，進(jìn)行狀態(tài)重置

從列表A點(diǎn)擊詳情A，頁(yè)面后退，重新打開(kāi)詳情A，還原之前訪問(wèn)詳情A狀態(tài)

從列表A點(diǎn)擊詳情A，頁(yè)面后退，重新打開(kāi)詳情B，清除詳情A的狀態(tài)，初始化詳情B的狀態(tài)

npm install --save 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: "", // 標(biāo)題
            tab: "", // 發(fā)表的板塊
            content: "" // 發(fā)表的內(nèi)容
          }
        },
        manuals: {
          async create ({ state }) {
            if (!state.title) {
              return utils.toast("標(biāo)題不能為空")
            } else if (!state.tab) {
              return utils.toast("選項(xiàng)不能為空")
            } else if (!state.content) {
              return utils.toast("內(nèi)容不能為空")
            }
            const res = await http.post(`/topics`, {
              ...state
            })
            if (res.success) {
              this.reset()
            } else {
              utils.toast(res.error_msg)
            }
            return res
          }
        }
      },
      /********* 實(shí)現(xiàn)列表上拉加載滾動(dòng)位置還原的核心代碼開(kāi)始 *************/
      list: {
        data () {
          return {
            data: [], // 列表存儲(chǔ)的數(shù)據(jù)
            loading: true, // 數(shù)據(jù)正在加載中
            done: false, // 數(shù)據(jù)是否已經(jīng)全部加載完成
            page: 1 // 加載的頁(yè)數(shù)
          }
        },
        async fetch ({ state, route, params, path }) {
          // 注，在vuet 0.1.2以上版本，會(huì)多帶一個(gè)params.routeWatch參數(shù)，我們可以根據(jù)這個(gè)來(lái)判斷頁(yè)面是否發(fā)生了變化
          if (params.routeWatch === true) { // 路由發(fā)生了變化，重置模塊狀態(tài)
            this.reset(path)
          } else if (params.routeWatch === false) { // 路由沒(méi)有變化觸發(fā)的請(qǐng)求，可能是從詳情返回到列表
            return {}
          }
          // params.routeWatch 沒(méi)有參數(shù)，則是上拉加載觸發(fā)的調(diào)用
          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, // 更新模塊的列表數(shù)據(jù)
            page: ++state.page, // 每次請(qǐng)求成功后，頁(yè)數(shù)+1
            loading: false, // 數(shù)據(jù)加載完成
            done: res.data.length < 20 // 判斷列表的頁(yè)數(shù)是否全部加載完成
          }
        }
      },
      /********* 實(shí)現(xiàn)列表上拉加載滾動(dòng)位置還原的核心代碼結(jié)束 *************/
      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 () {
            // 用戶未登錄，攔截請(qǐng)求
          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 () {
            // 用戶未登錄，攔截請(qǐng)求
            if (!this.getState("user-self").data.id) return
            const res = await http.get("/message/count")
            if (!res.data) return
            return {
              data: res.data
            }
          }
        }
      }
    }
  }
})

在Vuet實(shí)例創(chuàng)建完成后，我們就可以在組件中連接我們的Vuet了。

首頁(yè)列表

頁(yè)面詳情

因?yàn)槠邢蓿灾涣谐隽肆斜砗驮斍榈拇a，大家有興趣深入的話，可以看下vue-cnode的代碼。這是基于Vuet進(jìn)行狀態(tài)管理的完整項(xiàng)目，包含了用戶的登錄退出，路由頁(yè)面，滾動(dòng)位置還原，帖子編輯狀態(tài)保存等等，麻雀雖小，卻是五臟俱全。