Vue學習筆記（五）—— 狀态管理Vuex

介紹

Vuex 是一個專為 Vue.js 應用程式開發的狀态管理模式。它采用集中式存儲管理應用的所有元件的狀态，并以相應的規則保證狀态以一種可預測的方式發生變化。Vuex 也內建到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀态快照導入導出等進階調試功能。詳細可參考官網詳細。

有興趣的朋友可以看看之前的文章：

• Vue學習筆記（一）—— 常用特性
• Vue學習筆記（二）—— 元件開發
• Vue學習筆記（三）—— 前後端互動
• Vue學習筆記（四）—— 前端路由

1、Vuex概述

1.1 元件之間共享資料的方式

父向子傳值： v-bind 屬性綁定

子向父傳值： v-on 事件綁定

兄弟元件之間共享資料：EventBus

• $on 接收資料的那個元件
• $emit 發送資料的那個元件

注：上面介紹的三種傳值方式，隻适合在小範圍内進行資料的共享；頻繁或大範圍的就不太适合了！

1.2 Vuex 是什麼

Vuex 是實作元件全局狀态（資料）管理的一種機制，可以友善的實作元件之間資料的共享。

1.3 使用 Vuex 統一管理狀态的好處

1.能夠在vuex中集中管理共享的資料，易于開發和後期維護

2.能夠高效地實作元件之間的資料共享，提高開發效率

3.存儲在vuex中的資料都是響應式的，能夠實時保持資料與頁面的同步

1.4 什麼樣的資料适合存儲到 Vuex 中

一般情況下，隻有元件之間共享的資料，才有必要存儲到vuex中；對于元件之間的私有資料，依舊存儲在元件自身的data中即可。

2、Vuex 的基本使用

1.安裝vuex依賴包

npm install vuex --save
           

2.導入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)
           

3.建立store對象

const store = new Vuex.Store({
    // state 中存放的就是全局共享的資料
    state : { 
        count : 0
    }
})
           

4.将store對象挂載到vue執行個體中

new Vue({
    el: '#app',
    render: h => h(app),
    router,
    // 将建立的共享資料對象，挂載到vue執行個體中
    // 所有的元件，就可用直接從store中擷取全局的資料了
    store
})
           

3、Vuex 的核心概念

3.1 核心概念概述

• State
• Mutation
• Action
• Getter

3.2 State

State

提供唯一的公共資料源，所有共享的資料都要統一放到

Store

的

State

中進行存儲。

// 建立store資料源，提供唯一的公共資料
const store = new Vuex.Store({
    state : { count : 0}
})
           

元件通路

State

中資料的第一種方式：

this.$store.state.全局資料名稱
           

元件通路

State

中資料的第二種方式：

// 1. 從vuex中安需導入 mapState 函數
import { mapState } from 'vuex'
           

通過剛才導入的

mapState

函數，将目前元件需要的全局資料，映射為目前元件的

computed

計算屬性：

// 2. 将全局資料，映射為目前元件的計算屬性
computed: {
    ...mapState(['count'])
}
           

3.3 Mutation

Mutation

用于變更

Store

中的資料。

1.隻能通過 mutation 變更 Store 資料，不可以直接操作 Store 中的資料。

2.通過這種方式雖然操作起來稍微繁瑣一些，但是可用集中監控所有資料的變化。

注意：隻有

mutations

中定義的函數，才有權利修改

state

中的資料。

預設的使用方式：

// 定義Mutation
const store = new Vuex.Store({
    state: {
        count : 0
    },
    mutations: {
        add(state) {
            // 變更狀态
            state.count++
        }
    }
})
           

// 觸發mutation
methods: {
    handle1() {
        // 觸發 mutations 的第一種方式
        this.$store.commit('add')
    }
}
           

可用在觸發

mutations

時傳遞參數：

// 定義Mutation
const store = new Vuex.Store({
    state : {
        count: 0
    },
    mutations: {
        addN(state,step) {
            // 變更狀态
            state.count += step
        }
    }
})
           

// 觸發mutation
methods: {
    handle2() {
        // 在調用 commit 函數，
        // 觸發 mutations 時攜帶參數
        this.$store.commit('addN'，2)
    }
}
           

this.$store.commit()

是觸發

mutations

的第一種方式，以下是觸發

mutitions

的第二種方式：

// 1. 從vuex中安需導入 mapMutations 函數
import { mapMutations } from 'vuex'
           

通過剛才導入的

mapMutations

函數，将需要的

mutations

函數，映射為目前元件的

methods

方法：

// 2. 将指定的mutations函數，映射為目前元件的methods函數
methods: {
    ...mapMutations(['add','addN'])
}
           

3.4 Action

Action

用于處理異步任務。

如果通過異步操作變更資料，必須通過

Action

，而不能使用

Mutation

，但是在Action種還僧要通過觸發

Mutation

的方式簡介變更資料。

注意： 在

actions

中，不能直接修改

state

中的資料；必須通過

context.commit()

觸發某個

mutation

才行

// 定義Action
const store = new Vuex.Store({
    // ... 省略其他代碼
    mutations: {
        add(state) {
            // 變更狀态
            state.count++
        }
    },
    actions: {
        addAsync(context) {
            setTimeout(() => {
                context.commit('add')
            },1000)
        }
    }
})
           

// 觸發Action
methods: {
    handle() {
        // 觸發 actions 的第一種方式
        this.$store.dispatch('addAsync')
    }
}
           

觸發

actions

異步任務時攜帶參數：

// 定義Action
const store = new Vuex.Store({
    // ... 省略其他代碼
    mutations: {
        addN(state,step) {
            // 變更狀态
            state.count += step
        }
    },
    actions: {
        addAsync(context , step) {
            setTimeout(() => {
                context.commit('addN',step)
            },1000)
        }
    }
})
           

// 觸發Action
methods: {
    handle() {
        // 在調用 dispatch 函數，
        // 觸發 actions 時攜帶參數
        this.$store.dispatch('addAsync',2)
    }
}
           

this.$store.dispatch()

是觸發

actinos

的第一種方式，觸發

actions

的第二種方式：

// 1. 從vuex中安需導入 mapActions 函數
import { mapActions } from 'vuex'
           

通過剛才導入的

mapActions

函數，将需要的

actions

函數，映射為目前元件的

methods

方法：

// 2. 将指定的 actions 函數，映射為目前元件的methods函數
methods: {
    ...mapActions(['addAsync','addNAsync'])
}
           

3.5 Getter

Getter

用于對

Store

中的資料進行加工處理形成新的資料。記住，

Getter

不會修改

Store

中的資料，它隻起到一個包裝資料的作用。

特點：

1.Getter 可用對 Store 中已有的資料加工處理後形成新的資料，類似Vue的計算屬性。

2.Store 中資料發生變化， Getter 的資料也會跟着變化。

// 定義 Getter
const store = new Vuex.Store({
    state : {
        count : 0
    },
    getters: {
        showNum: state => {
            return '目前最新的數量是【'+ state.count +'】'
        }
    }
})
           

使用

getters

的第一種方式：

this.$store.getters.名稱
           

使用

getters

的第二種方式：

import { mapGetters } from 'vuex'

computed: {
    ...mapGetters(['showNum'])
}
           

總結

以上基本介紹了

Vuex

的概念、用法等基本内容。到這裡，其實

Vue

的相關基本知識就介紹的差不多了，至少在項目中需要的基本知識點都大體說到了。對于想深入了解的，個人還是建議首選官方網站進行學習，比較

Vue

的官網文檔也是很齊全的。