vuex 管理狀態

來分析下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來管理，是最好的選擇。