PS：本文主要內容來自于官方文檔，外加個人理解，作為個人學習記錄。

1. 什么是狀態共享機制？

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

狀態共享機制在開發中簡單通俗點說就是如何科學管理維護多組件之間的共享數據。這在使用Vue這類以組件為基礎搭建的項目中非常常見。簡單的使用場景可以參考本文內容（本文也是來自原 Vue 官方資料），復雜的場景請轉移至 Vuex 的學習。

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

2.?簡單狀態管理起步使用

?

經常被忽略的是，Vue 應用中原始數據對象的實際來源 - 當訪問數據對象時，一個 Vue 實例只是簡單的代理訪問。所以，如果你有一處需要被多個實例間共享的狀態，可以簡單地通過維護一份數據來實現共享：

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

現在當?sourceOfTruth?發生變化，vmA?和?vmB?都將自動的更新引用它們的視圖。子組件們的每個實例也會通過?this.$root.$data?去訪問。現在我們有了唯一的數據來源，但是，調試將會變為噩夢。任何時間，我們應用中的任何部分，在任何數據改變后，都不會留下變更過的記錄。

為了解決這個問題，我們采用一個簡單的?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 中去管理。這種集中式狀態管理能夠被更容易地理解哪種類型的 mutation 將會發生，以及它們是如何被觸發。當錯誤出現時，我們現在也會有一個 log 記錄 bug 之前發生了什么。

此外，每個實例/組件仍然可以擁有和管理自己的私有狀態：

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

重要的是，注意你不應該在 action 中 替換原始的狀態對象 - 組件和 store 需要引用同一個共享對象，mutation 才能夠被觀察

接著我們繼續延伸約定，組件不允許直接修改屬于 store 實例的 state，而應執行 action 來分發 (dispatch) 事件通知 store 去改變，我們最終達成了?Flux?架構。這樣約定的好處是，我們能夠記錄所有 store 中發生的 state 改變，同時實現能做到記錄變更 (mutation)、保存狀態快照、歷史回滾/時光旅行的先進的調試工具。

?

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

官方文檔參考：

什么是“狀態管理模式”？

簡單狀態管理起步使用

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。