什么情況下應該使用Vuex

這篇文章給大家分享的是有關什么情況下應該使用Vuex的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

單向數據流

以下是一個表示“單向數據流”理念的極簡示意：

但是，當我們的應用遇到多個組件共享狀態時，單向數據流的簡潔性很容易被破壞：

• - 多個視圖依賴于同一狀態。

• - 來自不同視圖的行為需要變更同一狀態。

對于問題一，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態傳遞無能為力。

對于問題二，我們經常會采用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的代碼。

因此，我們為什么不把組件的共享狀態抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的組件樹構成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態或者觸發行為！

另外，通過定義和隔離狀態管理中的各種概念并強制遵守一定的規則，我們的代碼將會變得更結構化且易維護。

這就是 Vuex 背后的基本思想，借鑒了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是，Vuex 是專門為 Vue.js 設計的狀態管理庫，以利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新。

什么情況下應該使用 Vuex？

雖然 Vuex 可以幫助我們管理共享狀態，但也附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。

如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是，如果您需要構建是一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成為自然而然的選擇。引用 Redux 的作者 Dan Abramov 的話說就是：

Flux 架構就像眼鏡：您自會知道什么時候需要它。

如果沒有使用Vuex

假設有這樣的兩個頁面，數據一樣，就是頁面布局不一樣：

代碼

Page1.vue

<template>
  <div>
    <h3>我是第一個頁面</h3>
    <ul class="ul_list">
      <li v-for="item in items">
        <p class="name">商品：{{item.name}}</p>
        <p class="price">價格：￥{{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: '陽澄湖大閘蟹',
            price: '10.0'
          }
        ]
    }
   },
  }
</script>

Page2.vue

<template>
  <div>
    <h3>我是第二個頁面</h3>
    <ul class="ul_list page2">
      <li v-for="item in items">
        <p class="name">商品：{{item.name}}</p>
        <p class="price">價格：￥{{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: '陽澄湖大閘蟹',
            price: '10.0'
          }
        ]
    }
   },
  }
</script>

現在我們可以看見上面兩個頁面里面的數據是一樣的。同一份數據，我們在兩個頁面里面操作兩次感覺還行，如果有10個，20個 ……頁面需要這樣，那么這就是一個讓人奔潰的事情，而且數據的同步刷新也很痛苦。所以就需要Vuex了。簡言之：vuex就是將數據共享給多個組件共同使用，同時也將這個數據的狀態進行了共享（一個組件改變這個數據的狀態其它組件也跟著改變）。

Vue官網對Vuex的解釋：

每一個 Vuex 應用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)。Vuex 和單純的全局對象有以下兩點不同：

1. Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。

2. 你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用。

感謝各位的閱讀！關于“什么情況下應該使用Vuex”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！