來分析下vuex的管理狀態吧，如果你用過react中的redux的管理樹，那我覺得vuex對你來說很容易掌握

如果你還是不太熟悉vuex是什麽，那先看下官網https://vuex.vuejs.org/zh-cn/intro.html，

看下這張圖：

下面就舉個例子會比較容易理解：

就拿vue的分頁組件來理解吧

1. 創建 pagination.vue 文件。

<template>
    <div class="page-wrap">
      <ul v-show="prePage" class="li-page" v-tap="{methods: goPrePage}"
 
>上一頁</ul>
      <ul>
        <li v-for="i in showPageBtn" :class="{active: i === currentPage, pointer: i, hover: i && i !== currentPage}"
            v-tap="{methods: goPage, i: i}">
          <a v-if="i" class="notPointer">{{i}}</a>
          <a v-else>···</
 
a>
        </li>
      </ul>
      <ul v-show="nextPage" class="li-page" v-tap="{methods: goNextPage}">下一頁</ul>
    </div>
</template>

2.組件的作用域是獨立的，父組件通信通過 props 向其傳遞數據，分頁組件通過 $emit 觸發在父組件定義的事件實現和父組件的通信，因此預設從父組件獲取到需顯示的總數 num 為 20 , limit 為 5，當然你也可以隨意設置這兩個值～

let that
export 
 
default{
    data(){
      that = this
      return{
        num: 20,
        limit: 5
      }
    }
}

3.計算幾個變量，在這裏可以使用 vue 的計算屬性 computed

// 總頁數 totalPage 應該等於需顯示的總數除以每頁顯示的個數，並向上取整，這個很好理解。
computed: {
      totalPage() {
        return Math.ceil(that.num / that.limit)
      }
    }
// 偏移量 offset，因為點擊上下頁、制定頁碼均會改變 offset 變量，父組件也需要用到這個變量發送 ajax 請求，因此使用 vuex 存儲 offset。
 // pagination.vue
    computed: {
      offset() {
          return that.$store.state.offset
      }
    }
// 當前頁面 currentPage，當前頁面是比較重要的一個變量，顯示用戶當前所處頁數，已知偏移量和每頁顯示數量可以得出當前頁面是二者的余數向上取整，因為頁數不從0開始，因此
computed: {
      currentPage() {
        return Math.ceil(that.offset / that.limit) + 1
      }
    }
//跳轉事件，分別點擊上一頁、下一頁和指定頁碼

 methods: {
      goPage(params) {
        if (params.i === 0 || params.i === that.currentPage) return
        that.$store.commit(‘GO_PAGE‘, (params.i-1) * that.limit)
        that.$emit(‘getNew‘)
      },
      goPrePage() {
        that.$store.commit(‘PRE_PAGE‘, that.limit)
        that.$emit(‘getNew‘)
      },
      goNextPage() {
        that.$store.commit(‘NEXT_PAGE‘, that.limit)
        that.$emit(‘getNew‘)
      }
    }

4.vuex 部分

• 在此介紹一下 vuex 部分的實現，在 src 目錄下（和 components 目錄平級），新建 store 目錄，其中 index.js 文件傳入 mutation，初始化 vuex；

// vuex ?store/index.js
  import Vue from ‘vue‘
  import Vuex from ‘vuex‘
  import mutations from ‘./mutations‘

  Vue.use(Vuex);

  const state = {
    offset: 0
  };

  export default new Vuex.Store({
    state,
    mutations
  })

• mutation-types.js 記錄所有的事件名，其實這個文件最大的好處是能讓我們更直觀地管理所有的 vuex 方法，它的優點會在項目復雜後凸顯出來，項目復雜時我們可能會使用 vuex 存儲很多數據、定義很多方法，這時 mutation-types.js 就能更好更直觀地管理這些方法。這也是一種設計理念嘛，有利於後期維護。

  // mutation-types.js
      export const PRE_PAGE = ‘PRE_PAGE‘
      export const NEXT_PAGE = ‘NEXT_PAGE‘
      export const GO_PAGE = ‘GO_PAGE‘

• mutation.js 這是 vuex 的核心文件，註冊了實現的所有事件，我們定義了點擊上一頁、下一頁和跳轉到指定頁面的方法

  // mutation.js
    import * as types from ‘./mutation-types‘
  
    export default {
      // 分頁 上一頁
      [types.PRE_PAGE] (state, offset) {
        state.offset -= offset
      },
      // 分頁 下一頁
      [types.NEXT_PAGE] (state, offset) {
        state.offset += offset
      },
      // 分頁 跳轉到指定頁碼
      [types.GO_PAGE] (state, offset) {
        state.offset = offset
      }
    };

  最後你想要監聽store裏的state的變化你可以用這個2個函數，在頁面裏 用computed和watch來

computed: {
        initMovies() {
            return this.$store.state.movies;
        },
    },
    watch: {
        initMovies(val) {
            this.movies = val;
        }
    },

對了 你也可以用this.$store.dispatch來觸發actions裏面type，最後在mutation.js裏改變state。

對於復雜的項目來說，用vuex來管理，是最好的選擇。

vuex 管理狀態