單向數(shù)據(jù)流

以下是一個(gè)表示“單向數(shù)據(jù)流”理念的極簡(jiǎn)示意：

但是，當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，單向數(shù)據(jù)流的簡(jiǎn)潔性很容易被破壞：

• - 多個(gè)視圖依賴(lài)于同一狀態(tài)。
• - 來(lái)自不同視圖的行為需要變更同一狀態(tài)。

對(duì)于問(wèn)題一，傳參的方法對(duì)于多層嵌套的組件將會(huì)非常繁瑣，并且對(duì)于兄弟組件間的狀態(tài)傳遞無(wú)能為力。

對(duì)于問(wèn)題二，我們經(jīng)常會(huì)采用父子組件直接引用或者通過(guò)事件來(lái)變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱，通常會(huì)導(dǎo)致無(wú)法維護(hù)的代碼。

因此，我們?yōu)槭裁床话呀M件的共享狀態(tài)抽取出來(lái)，以一個(gè)全局單例模式管理呢？在這種模式下，我們的組件樹(shù)構(gòu)成了一個(gè)巨大的“視圖”，不管在樹(shù)的哪個(gè)位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為！

另外，通過(guò)定義和隔離狀態(tài)管理中的各種概念并強(qiáng)制遵守一定的規(guī)則，我們的代碼將會(huì)變得更結(jié)構(gòu)化且易維護(hù)。

這就是 Vuex 背后的基本思想，借鑒了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是，Vuex 是專(zhuān)門(mén)為 Vue.js 設(shè)計(jì)的狀態(tài)管理庫(kù)，以利用 Vue.js 的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來(lái)進(jìn)行高效的狀態(tài)更新。

什么情況下應(yīng)該使用 Vuex？

雖然 Vuex 可以幫助我們管理共享狀態(tài)，但也附帶了更多的概念和框架。這需要對(duì)短期和長(zhǎng)期效益進(jìn)行權(quán)衡。

如果您不打算開(kāi)發(fā)大型單頁(yè)應(yīng)用，使用 Vuex 可能是繁瑣冗余的。確實(shí)是如此——如果您的應(yīng)用夠簡(jiǎn)單，您最好不要使用 Vuex。一個(gè)簡(jiǎn)單的 global event bus 就足夠您所需了。但是，如果您需要構(gòu)建是一個(gè)中大型單頁(yè)應(yīng)用，您很可能會(huì)考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會(huì)成為自然而然的選擇。引用 Redux 的作者 Dan Abramov 的話說(shuō)就是：

Flux 架構(gòu)就像眼鏡：您自會(huì)知道什么時(shí)候需要它。

如果沒(méi)有使用Vuex

假設(shè)有這樣的兩個(gè)頁(yè)面，數(shù)據(jù)一樣，就是頁(yè)面布局不一樣：

代碼

Page1.vue

<template>
  <div>
    <h2>我是第一個(gè)頁(yè)面</h2>
    <ul class="ul_list">
      <li v-for="item in items">
        <p class="name">商品：{{item.name}}</p>
        <p class="price">價(jià)格：￥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
        items: [
          {
            name: '贛州橙子',
            price: '8.8'
          },
          {
            name: '新疆哈密瓜',
            price: '2.0'
          },
          {
            name: '山東大棗',
            price: '3.2'
          },
          {
            name: '陽(yáng)澄湖大閘蟹',
            price: '10.0'
          }
        ]
    }
   },
  }
</script>

Page2.vue

<template>
  <div>
    <h2>我是第二個(gè)頁(yè)面</h2>
    <ul class="ul_list page2">
      <li v-for="item in items">
        <p class="name">商品：{{item.name}}</p>
        <p class="price">價(jià)格：￥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
        items: [
          {
            name: '贛州橙子',
            price: '8.8'
          },
          {
            name: '新疆哈密瓜',
            price: '2.0'
          },
          {
            name: '山東大棗',
            price: '3.2'
          },
          {
            name: '陽(yáng)澄湖大閘蟹',
            price: '10.0'
          }
        ]
    }
   },
  }
</script>

現(xiàn)在我們可以看見(jiàn)上面兩個(gè)頁(yè)面里面的數(shù)據(jù)是一樣的。同一份數(shù)據(jù)，我們?cè)趦蓚€(gè)頁(yè)面里面操作兩次感覺(jué)還行，如果有10個(gè)，20個(gè) ……頁(yè)面需要這樣，那么這就是一個(gè)讓人奔潰的事情，而且數(shù)據(jù)的同步刷新也很痛苦。所以就需要Vuex了。簡(jiǎn)言之：vuex就是將數(shù)據(jù)共享給多個(gè)組件共同使用，同時(shí)也將這個(gè)數(shù)據(jù)的狀態(tài)進(jìn)行了共享（一個(gè)組件改變這個(gè)數(shù)據(jù)的狀態(tài)其它組件也跟著改變）。

Vue官網(wǎng)對(duì)Vuex的解釋?zhuān)?/strong>