摘要：前言從發(fā)布之后，陸陸續(xù)續(xù)做了七八個(gè)項(xiàng)目，摸索出來了一套自己的狀態(tài)管理模式，我將之稱為。其實(shí)自帶的規(guī)則能夠支持同時(shí)記錄全局滾動(dòng)條自身的滾動(dòng)條，這樣就能大大的提升了我們的用戶體驗(yàn)例子源碼官方

從Vue.js 2.x發(fā)布之后，陸陸續(xù)續(xù)做了七八個(gè)項(xiàng)目，摸索出來了一套自己的狀態(tài)管理模式，我將之稱為Vuet。它以規(guī)則來驅(qū)動(dòng)狀態(tài)更新，它帶來的是開發(fā)效率上的飆升，它就像草原，而你是野馬，任你隨意馳騁，總之它是為敏捷開發(fā)而誕生。

在大型的Vue應(yīng)用程序開發(fā)中，多組件通信、多頁面通信，往往是跨不過的坎，一個(gè)頁面組件中往往參雜著頁面獲取數(shù)據(jù)的代碼和響應(yīng)用戶操作的代碼，稍有不慎，就使得代碼混亂不堪。A、B、C三個(gè)頁面中，都需要同樣的數(shù)據(jù)，然后每一個(gè)頁面都寫一次、發(fā)送一次請求，不久之后，代碼就十分臃腫了。因此我們就需要vuex這樣的第三方庫來管理狀態(tài)了

從列表點(diǎn)擊進(jìn)去到詳情，從詳情返回后，我們期望能顯示回原來的位置，而不是整個(gè)頁面重新初始化，重新請求數(shù)據(jù)，這樣帶來的是用戶體驗(yàn)的極度糟糕的，我們期望能有一種規(guī)則來定義狀態(tài)應(yīng)該如何更新，這便是Vuet.js誕生的初衷。它以規(guī)則來定義狀態(tài)的更新，它也是一種Vue.js全新的狀態(tài)管理模式。天生的規(guī)則驅(qū)動(dòng)，使得本次教程的主題，也將變得異常簡單，因?yàn)槲覀冎恍枰x好頁面更新的規(guī)則即可實(shí)現(xiàn)。

Vuex和Vuet的出發(fā)點(diǎn)不一樣，Vuex不建議直接更新狀態(tài)，而是通過提交mutation來更新狀態(tài)，而Vuet則是允許的。因此Vuex和Vuet是可以配合使用的，并且有著不同的應(yīng)用場景，該用Vuex的地方就用Vuex，可用Vuet的地方，就可以使用Vuet

上面廢話了那么久，也是因?yàn)閂uet.js才剛剛誕生，急需大家的支持。嗯，接下來我們開始本次的主題！

|-- pages                 // 頁面組件
|   |-- topic             // 主題模塊
|       |-- Detail.vue    // 主題詳情
|       |-- List.vue      // 主題列表
|-- router                // router相關(guān)
|   |-- index.js          // 入口文件
|   |-- router.js         // 實(shí)例化VueRouter
|-- vuet                  // vuet相關(guān)
|   |-- index.js          // 入口文件
|   |-- topic-detail.js   // 主題詳情的狀態(tài)
|   |-- topic-list.js     // 主題列表的狀態(tài)
|   |-- vuet.js           // 實(shí)例化Vuet
|- index.html             // 程序頁面入口文件
|- main.js                // Vue實(shí)例化入口文件

上面是我們本次項(xiàng)目的基本目錄結(jié)構(gòu)

npm install vue vue-router vuet --save

這些都是基本的模塊，想必不用多說，大家都知道的。

先給出官方文檔地址
本章的主題，核心就是在route規(guī)則身上，它能幫你獲取、更新、重置頁面的狀態(tài)，配合v-route-scroll指令就能幫你處理頁面的全局滾動(dòng)條和div元素自身的滾動(dòng)條

main.js

  import Vue from "vue"
  import router from "./router/"
  import vuet from "./vuet/"
  
  export default new Vue({
    el: "#app",
    vuet,
    router,
    render (h) {
      return h("router-view")
    }
  })

vuet/index.js

  import vuet from "./vuet"
  
  export default vuet

vuet/vuet.js

  import Vue from "vue"
  import Vuet from "vuet"
  import topicList from "./topic-list"
  import topicDetail from "./topic-detail"
  
  Vue.use(Vuet)
  
  const vuet = new Vuet({
    data () {
      return {
        loading: true, // 請求中
        loaderr: false // 請求失敗
      }
    },
    pathJoin: "-", // 父子模塊的連接路徑
    modules: {
      topic: {
        list: topicList,
        detail: topicDetail
      }
    }
  })
  
  vuet.beforeEach(({ path, params, state }) => {
    state.loading = true
    state.loaderr = false
  })
  
  vuet.afterEach((err, { path, params, state }) => {
    state.loading = false
    state.loaderr = !!err
  })
  
  export default vuet

vuet/topic-list.js

  export default {
    routeWatch: "query", // 定義頁面的更新規(guī)則
    data () {
      return {
        data: [],
        tabs: [
          {
            label: "全部",
            value: "all"
          },
          {
            label: "精華",
            value: "good"
          },
          {
            label: "分享",
            value: "share"
          },
          {
            label: "問答",
            value: "ask"
          },
          {
            label: "招聘",
            value: "job"
          }
        ]
      }
    },
    async fetch ({ route }) {
      const { tab = "" } = route.query
      const { data } = await window.fetch(`https://cnodejs.org/api/v1/topics?mdrender=false&tab=${tab}`).then(response => response.json())
      return {
        data
      }
    }
  }

vuet/topic-detail.js

  export default {
    routeWatch: "params.id", // 定義頁面的更新規(guī)則
    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
        }
      }
    },
    async fetch ({ route }) {
      const { data } = await window.fetch(`https://cnodejs.org/api/v1/topic/${route.params.id}`).then(response => response.json())
      return {
        data
      }
    }
  }

router/index.js

  import router from "./router"
  
  export default router

router/router.js

  import Vue from "vue"
  import VueRouter from "vue-router"
  import TopicList from "../pages/topic/List"
  import TopicDetail from "../pages/topic/Detail"
  
  Vue.use(VueRouter)
  
  const RouterView = {
    render (h) {
      return h("router-view")
    }
  }
  
  const router = new VueRouter({
    routes: [
      {
        path: "/",
        component: RouterView,
        children: [
          {
            path: "",
            name: "topic-list",
            component: TopicList
          },
          {
            path: "/:id",
            name: "topic-detail",
            component: TopicDetail
          }
        ]
      }
    ]
  })
  
  export default router

pages/topic/List.vue

pages/topic/Detail.vue

咋的一看，Vuet看起來也不是很復(fù)雜，只需要定義好模塊狀態(tài)，然后在組件中設(shè)置對應(yīng)的規(guī)則來更新模塊的狀態(tài)即可。其實(shí)vuet自帶的route規(guī)則能夠支持同時(shí)記錄全局滾動(dòng)條、div自身的滾動(dòng)條，這樣就能大大的提升了我們的用戶體驗(yàn)

例子源碼

Vuet官方