Vuex—集中式狀態(tài)管理模式

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

以上是 Vuex 官方文檔給出的定義，抓一下關(guān)鍵詞我們不妨稱之為集中式的狀態(tài)管理模式。它實(shí)際上就是將組件間的共享狀態(tài)抽取出來(lái)，以一個(gè)全局單例模式進(jìn)行狀態(tài)管理，下面我們用官方文檔上的例子來(lái)對(duì)比一下兩者的使用。

1. 常用的組件狀態(tài)共享

在下面的 Vue 計(jì)數(shù)應(yīng)用中，我們常用以下方式進(jìn)行狀態(tài)管理。

• state：定義組件初始數(shù)據(jù)
• view：根據(jù)狀態(tài)變化更新視圖
• actions：響應(yīng)用戶操作產(chǎn)生的狀態(tài)變化

new Vue({// statedata () {return {count: 0}},// viewtemplate: `<div>{{ count }}</div>`,// actions methods: {inc () {this.count++},dec () {this.count--}} })

每個(gè)組件內(nèi)擁有自己的數(shù)據(jù)和邏輯，很好的實(shí)現(xiàn)了組件化化便于管理。但這種方式有極大的弊端，組件的個(gè)數(shù)或者嵌套層級(jí)越多時(shí)，他們之間的狀態(tài)管理就變得十分復(fù)雜。比如兄弟組件間同步狀態(tài)需要使用 event bus，父子間組件間需要 props 屬性和 emit 觸發(fā)事件來(lái)達(dá)到目的。

2. 集中式狀態(tài)管理

為了解決上述問(wèn)題，我們可以采用 Vuex。

• state：全局唯一數(shù)據(jù)源，包含全部的應(yīng)用狀態(tài)。集中存儲(chǔ)了組件所需要的數(shù)據(jù)以進(jìn)行全局的統(tǒng)一狀態(tài)管理。
• mutations：狀態(tài)變更方法。提交 mutations 是更改 state 的唯一方法。
  • commit：提交 mutations 的唯一方法。
• actions：負(fù)責(zé)響應(yīng)用戶操作，主要是異步操作。
  • dispatch：執(zhí)行 actions 的唯一方法。
• getters：類似于計(jì)算屬性 computed，可響應(yīng)式獲取 state 對(duì)象。

Vue 組件接收交互行為，調(diào)用 dispatch 方法觸發(fā) action 相關(guān)處理，若頁(yè)面狀態(tài)需要改變，則調(diào)用 commit 方法提交 mutation 修改state，通過(guò) getters 獲取到state新值，重新渲染 Vue Components，界面隨之更新。

new Vuex.Store({state: {count: 0},mutations: {inc: state => state.count++,dec: state => state.count--} }) new Vue({el: '#app',computed: {count () {return store.state.count}},methods: {inc () {store.commit('inc')},dec () {store.commit('dec')}} })

Vuex 將所有的狀態(tài)集中管理，使得應(yīng)用的數(shù)據(jù)流動(dòng)和狀態(tài)變化十分清晰，簡(jiǎn)化組件間的狀態(tài)同步與修改。

總結(jié)

對(duì)于 Vuex 的適用場(chǎng)景，要取決于組件間通信的復(fù)雜程度。如果較為復(fù)雜則要使用 Vuex 來(lái)簡(jiǎn)化操作增加程序的可維護(hù)性。

轉(zhuǎn)載于:https://www.cnblogs.com/qimeng/p/8366756.html

總結(jié)

以上是生活随笔為你收集整理的Vue笔记（五）：Vuex的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。