Vue剛出不久，Vuex 就出來了，想請教下Vuex做了什麼事情？

Vue，2014的時候發布，而現在的Vuex也正在完善，快要問世了。在已有Vue的情況下，Vuex做了哪些事情？

---

Vuex 之於 Vue 就像 Redux 之於 React：State Management Architecture &<---&> View Layer

正好這兩天剛把英文文檔寫完了：http://vuex.vuejs.org/en/intro.html

---

組件之間的作用域獨立，而組件之間經常又需要傳遞數據。

A 為父組件，下面有子組件 B 和 C。

A 的數據可以通過 props 傳遞給 B 和 C。

A 可以通過 $broadcast 調用 B 和 C 的 events，從而操作 B 和 C 的數據。

B 和 C 可以通過 $dispatch 調用 A 的 events，從而操作 A 的數據。

當 B 需要操作 C 的數據就會比較麻煩，需要先 $dispatch 到 A，再 $broadcast 到 C。如果項目比較小的話還好，越大的項目，涉及的組件通信就越多、越頻繁，此時管理起來就會非常累，而且容易出錯。

這就是 Vuex 的意義所在。它可以將數據置於單獨的一層，並提供給外部操作內部數據的方法。粗俗一點，就這樣理解吧。

=== === ===

更新：

Vue 2 發布了，去掉了 $dispatch 和 $broadcast，已經不會出現通信事件 ping-pong 的情況了。我們需要有一個 Vue 實例來充當通信媒介的作用，Vue 官方文檔里將它叫做 event bus。

export default new Vue();


當我們需要組件之間事件通信的時候，只需要對這個 event bus 使用 $emit 和 $on 就可以了。

import Bus from "./bus.js";

export default Vue.extend({
template: `
&{{msg}}& `,

data: () =&> ({
msg: "Hello World!"
}),

created() {
Bus.$on("setMsg", content =&> {
this.msg = content;
});
}
});


import Bus from "./bus.js";

export default Vue.extend({
template: `
&Say Hi& `,

methods: {
sendEvent() {
Bus.$emit("setMsg", "Hi Vue!");
}
}
});


Event bus 是一種實踐，你也可以在 Vue 1.x 中使用它。

---

為什麼旁邊是尤大的回答我還敢回答呢？

答案有四：

1.中文版現在已經有了；

2.尤大給出的英文版里還沒有中文版鏈接；

3. http://vuex.vuejs.org 這個子站點的語言版本url規則和主站點不同，無法通過簡單推理 http://vuejs.org -&> http://cn.vuejs.org 得出；

4.而搜索的話，又只有被屏蔽的google才能搜到這個網址：

http://vuex.vuejs.org/zh-cn/intro.html

然而，當初vue文檔沒有一個字看不明白的我，看vuex文檔竟然沒有一個字能看明白。

看完連是幹什麼用的都還不知道。

我感覺那教程就是給用過「Redux」的人熟悉一下V家族api的。

然後我又搜出來這個看了：

https://github.com/vuejs/vuex

Todo例子比較簡單，也直觀，然後我發現我是卡在這個地方：

不明白Vuex是為了解決什麼問題而存在的。

以前我學技術一學就會，都是因為悶頭接觸需求到幾乎要臨門一腳自己發明的程度，然後剛好看到成熟的新技術，然後非常爽。而這次這個Vuex存在本身的需求點，似乎我還不能完全理解。

多組件通信？所有組件用的都是同一個vue實例的監聽屬性（很大很深的對象樹），不就都自動映射了？vue本來不就是干這個的？

——2016.02.28更新——

經近日研究，Vuex的主要作用是各組件間的狀態同步（以及同一組件再次顯示時的狀態保持）。

特別是非資料庫內容。比如網頁右上角的搜索框，並不像日誌列表那樣對應資料庫內容。

如果不希望每次進入有搜索框的模板頁面，搜索框內容都被重置，那麼就需要高於組件的架構。

對於簡單的需求，可以選擇使用奇技淫巧：

每次組件重新生成時使用的不是全新的對象字面量，而是對同一個對象的引用。

這個對象引用，可以用閉包變數_$v（或全局變數$v）來持存。

data:function(){return _$v;}


（或）

data:function(){return {v:_$v};}


例如：

&
&&
&
&plus&
& &
(function(){
var _$v={v:"v"};
Vue.component("v-v",{
template:"{{v}}&",
data:function(){return _$v;}
});
new Vue({
el:"div",
data:{
v:_$v,
s:2
}
});
})();
&


當然，這是開發Vue(x)思路，即利用原生JavaScript對象特性。

對於使用Vue(x)，最合理的似乎就是大家所說的Vuex，人家會自動化代理這些的。

不過這樣循序漸進，仍然有助於更好地理解、學習、進入和軟著陸使用Vuex。

---

讀一下官方文檔 Choose a language | 吧，已經清晰到不行了，如果你玩過 vue，只是想簡單了解下 vuex 幹嘛的，可以看下我的讀書筆記 Vuex 筆記之 Q A ，粗略感受一下 vuex 幾個簡單的概念。

---

解決不同組件之間通信的問題。

---

推薦閱讀：