PS：本文主要內(nèi)容來自于官方文檔，外加個(gè)人理解，作為個(gè)人學(xué)習(xí)記錄。

1. 什么是狀態(tài)共享機(jī)制？

首先說一下這里的“狀態(tài)”，狀態(tài)主要是指 Vue 組件的 data 字段。

狀態(tài)共享機(jī)制在開發(fā)中簡(jiǎn)單通俗點(diǎn)說就是如何科學(xué)管理維護(hù)多組件之間的共享數(shù)據(jù)。這在使用Vue這類以組件為基礎(chǔ)搭建的項(xiàng)目中非常常見。簡(jiǎn)單的使用場(chǎng)景可以參考本文內(nèi)容（本文也是來自原 Vue 官方資料），復(fù)雜的場(chǎng)景請(qǐng)轉(zhuǎn)移至 Vuex 的學(xué)習(xí)。

說到這里不得不提一下 Vue 的父子組件的數(shù)據(jù)交流【詳細(xì)內(nèi)容參考這兩個(gè)部分：通過 Prop 向子組件傳遞數(shù)據(jù)、通過事件向父級(jí)組件發(fā)送消息】，父子組件的數(shù)據(jù)交流是非常常見的開發(fā)需求，上述傳統(tǒng)方法，只適合聯(lián)系緊密的父子，不適合兄弟組件，也同樣不適合復(fù)雜的多層關(guān)聯(lián)。所以組件之間的數(shù)據(jù)關(guān)聯(lián)就需要我們采用合理的設(shè)計(jì)模式來解決，這就是本文的重點(diǎn)也是 Vuex 的基本核心----簡(jiǎn)單的狀態(tài)共享機(jī)制實(shí)現(xiàn)。

2.?簡(jiǎn)單狀態(tài)管理起步使用

?

經(jīng)常被忽略的是，Vue 應(yīng)用中原始數(shù)據(jù)對(duì)象的實(shí)際來源 - 當(dāng)訪問數(shù)據(jù)對(duì)象時(shí)，一個(gè) Vue 實(shí)例只是簡(jiǎn)單的代理訪問。所以，如果你有一處需要被多個(gè)實(shí)例間共享的狀態(tài)，可以簡(jiǎn)單地通過維護(hù)一份數(shù)據(jù)來實(shí)現(xiàn)共享：

const sourceOfTruth = {}const vmA = new Vue({data: sourceOfTruth })const vmB = new Vue({data: sourceOfTruth })

現(xiàn)在當(dāng)?sourceOfTruth?發(fā)生變化，vmA?和?vmB?都將自動(dòng)的更新引用它們的視圖。子組件們的每個(gè)實(shí)例也會(huì)通過?this.$root.$data?去訪問。現(xiàn)在我們有了唯一的數(shù)據(jù)來源，但是，調(diào)試將會(huì)變?yōu)樨瑝?mèng)。任何時(shí)間，我們應(yīng)用中的任何部分，在任何數(shù)據(jù)改變后，都不會(huì)留下變更過的記錄。

為了解決這個(gè)問題，我們采用一個(gè)簡(jiǎn)單的?store 模式：

var store = {debug: true,state: {message: 'Hello!'},setMessageAction (newValue) {if (this.debug) console.log('setMessageAction triggered with', newValue)this.state.message = newValue},clearMessageAction () {if (this.debug) console.log('clearMessageAction triggered')this.state.message = ''} }

需要注意，所有 store 中 state 的改變，都放置在 store 自身的 action 中去管理。這種集中式狀態(tài)管理能夠被更容易地理解哪種類型的 mutation 將會(huì)發(fā)生，以及它們是如何被觸發(fā)。當(dāng)錯(cuò)誤出現(xiàn)時(shí)，我們現(xiàn)在也會(huì)有一個(gè) log 記錄 bug 之前發(fā)生了什么。

此外，每個(gè)實(shí)例/組件仍然可以擁有和管理自己的私有狀態(tài)：

var vmA = new Vue({data: {privateState: {}, // 自己的私有狀態(tài)sharedState: store.state // 共享部分的狀態(tài)} })var vmB = new Vue({data: {privateState: {}, // 自己的私有狀態(tài)sharedState: store.state // 共享部分的狀態(tài)} })

重要的是，注意你不應(yīng)該在 action 中 替換原始的狀態(tài)對(duì)象 - 組件和 store 需要引用同一個(gè)共享對(duì)象，mutation 才能夠被觀察

接著我們繼續(xù)延伸約定，組件不允許直接修改屬于 store 實(shí)例的 state，而應(yīng)執(zhí)行 action 來分發(fā) (dispatch) 事件通知 store 去改變，我們最終達(dá)成了?Flux?架構(gòu)。這樣約定的好處是，我們能夠記錄所有 store 中發(fā)生的 state 改變，同時(shí)實(shí)現(xiàn)能做到記錄變更 (mutation)、保存狀態(tài)快照、歷史回滾/時(shí)光旅行的先進(jìn)的調(diào)試工具。

?

通過對(duì)上面的官方文檔研究，感覺這就是菜鳥與大神的在編碼設(shè)計(jì)上的規(guī)范和思維上差別，受益頗深，特此記錄。

官方文檔參考：

什么是“狀態(tài)管理模式”？

簡(jiǎn)單狀態(tài)管理起步使用

總結(jié)

以上是生活随笔為你收集整理的Vuex 入门前的小菜 - “Vue 中的简单状态共享机制实现”的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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