Vuex學習與使用

vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，

並以相應的規則保證狀態以一種可**的方式發生變化

這是vuex的官網，對vuex的解釋，乍一看挺難理解的，什麼叫狀態管理模式？，什麼又是集中式儲存管理？，官網的描述不明覺厲。首先我們就先來解釋這個定義。

所有的開源庫都是為了解決我們在實際開發的過程之中遇到的問題而出現的。而vuex就是為了解決我們在使用vue的過程中對多個檢視依賴於同乙個狀態（或者說：我們很難在vue中通過一種優雅的方式建立全域性變數，並改變全域性變數的狀態）。現在理解了嗎？

1、vuex就是在vue中建立全域性變數的東西

2、vuex提供了一些優雅的方法，可以讓我們改變全域性變數的值

ok, 這就是vuex所解決的問題。

使用vuex的方式非常非常簡單，我們只需要記住幾個核心的概念就可以。

1、this.$store ：我們可以通過 this.$store 在vue的元件中獲取 vuex的例項。 2、state ： vuex中的資料來源，我們可以通過 this.$store.state 獲取我們在vuex中宣告的全域性變數的值。 3、getter：相當於vue中的computed ，及計算屬性，可以用於監聽、計算 state中的值的變化 4、mutation： vuex中去運算元據的方法（只能同步執行） 5、action：用來操作 mutation 的動作，他不能直接去運算元據源，但可以把mutation變為非同步的 6、module：模組化，當你的應用足夠大的時候，你可以把你的vuex分成多個

子模組

這就是vuex中所有的概念了，是不是很簡單？下面就讓我們通過例項，看看他這些概念具體都是怎麼使用的。

這個store資料夾，就是我們放置vuex檔案的地方。

在store資料夾下建立 index.js 作為我們生成vuex的檔案。

// index.js
import vue from 'vue'; 
import vuex from 'vuex';
// 需要註冊vuex到vue中
vue.use(vuex);
// 使用 es6 語法把vuex的例項物件輸出
export default new vuex.store()

然後在vue的初始檔案中註冊vuex的例項

import store from './store'
new vue()

這樣 vuex 就已經註冊完成了。

下面我們在vuex中去註冊我們前面說過的vuex的核心概念

import vue from 'vue';
import vuex from 'vuex';
vue.use(vuex);
export default new vuex.store(,
// 在getters中宣告state中變數的計算函式，快取計算後的資料， 通過 this.$store.getters 呼叫
getters: 
},// 只能執行同步方法，不要去執行非同步方法 通過 this.$store.commit 方法去呼叫
mutations: ,
// mutations的第乙個引數即為 state物件，並且可以向mutation傳入額外的引數
addnumcount: (state, n) => ,
},// 借助actions的手去 執行 mutations ， 通過 this.$store.dispatch 的方式呼叫
// 可以用來執行非同步操作，可以跟蹤非同步資料狀態變化
actions: ,
addnumcount: (context, n) => 
}})

我們在**中分別註冊了，state、getters、mutations、actions。

這樣我們就可以在任何乙個 component中通過 this.sto

re.d

ispa

tch(

′add

numc

ount

′,5)

;或者t

his.

store.dispatch('addnumcount', 5); 或者 this.

store.

disp

atch

(′ad

dnum

coun

t′,5

);或者

this

.store.dispatch(『addcount』); 去觸發actions操作來改變state中的值。

很容易對不對？這些就是vuex中最基礎的概念，了解了這些，就可以入門vuex了。但是vuex中還有乙個我們前面列出來的核心概念，我們並沒有說，他就是modules。顧名思義，模組。也就是說當我們的專案足夠大的時候，我們不希望吧所有的全域性變數和操作全域性變數的方法都放到乙個檔案中的時候，我們可以使用 modules去分割模組。

其他的一些概念，我們不在這篇部落格中去講解了，因為vuex的官網中的描述非常清楚，我還是建議大家如果想更深的了解vuex（包括模組化，vuex中推薦的專案結構，mapstate，actions promise 等概念），可以去訪問 vuex的官網，一定會獲益良多的。

Vuex學習與使用

vuex的學習與使用

vuex使用與解析

vuex的使用與部署

Vuex學習與使用

vuex的學習與使用

vuex使用與解析

vuex的使用與部署

相關推薦