到底vuex是什麼？

時間 2019-11-05

標籤到底 vuex 什麼简体版

原文原文鏈接

正文

關於vuex類的新聞最近不少，看到眼熱就去查了下資料，而後扯出來一堆flux、redux、state、state之類的概念，以及大型工程必要性之類的。看官方手冊也是昏昏然。vue

然而，我仍是弄懂了!我準備從demo出發，以一樣的一個最簡單的demo，演示兩種狀況下的代碼編寫狀況：git

單純依賴於vue.jsvuex
依賴vue.js，也使用了vuex技術redux

目的是經過對比引出vuex的概念、優點和劣勢。也許這是目前最接地氣的vuex的介紹吧：）。因此不管如何在瞭解vuex以前，你必須懂得vue.js(好像廢話：）。如今開始。bootstrap

假設一個微小的應用，有一個標籤顯示數字，兩個按鈕分別作數字的加一和減一的操做。用戶界面看起來是這樣的：數組

使用vue的話，就是這樣：瀏覽器

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>
new Vue({
  el:'#app',
  data () {
    return {
      count: 0
    }
  },
  methods: {
    inc () {
      this.count++
    },
    dec () {
      this.count--
    }
  }
})
</script>

我寫的代碼代碼能夠直接拷貝到你的html內而且打開執行，你能夠不費多餘的勁兒，就把應用跑起來，按按按鈕，看看界面上的反應是否如你預期。app

整個代碼結構很是清晰，代碼是代碼，數據是數據，這也是我一直以來很是喜歡vue.js的重要緣由。代碼就是放在methods數組內的兩個函數inc、dec，被指令@click關聯到button上。而data內返回一個屬性count，此屬性經過{{count}}綁定到標籤p內。函數

如今來看看，一樣的demo app，使用vuex完成的代碼的樣子，再一次，以下代碼不是代碼片斷，是能夠貼入到你的html文件內，而且直接使用瀏覽器打開運行的。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@next"></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
      inc: state => state.count++,
    dec: state => state.count--
  }
})

const app = new Vue({
  el: '#app',
  computed: {
    count () {
        return store.state.count
    }
  },
  methods: {
    inc () {
      store.commit('inc')
    },
    dec () {
        store.commit('dec')
    }
  }
})
</script>

咱們先看到有哪些重要的變化：

新的代碼添加了對vuex@next腳本的依賴。這是固然的，由於你須要使用vuex的技術，固然須要引用它
methods數組仍是這兩個方法，這和demo1是同樣的；可是方法內的計算邏輯，再也不是在函數內進行，而是提交給store對象！這是一個新的對象！
count數據也再也不是一個data函數返回的對象的屬性；而是經過計算字段來返回，而且在計算字段內的代碼也不是本身算的，而是轉發給store對象。再一次store對象！

就是說，以前在vue實例內作的操做和數據的計算如今都再也不本身作了，而是交由對象store來作了。這忽然讓我想到就先餐廳如今都不在洗碗了，都交給政府認證的機構來洗了。

說回正題。store對象是Vuex.Store的實例。在store內有分爲state對象和mutations對象，其中的state放置狀態,mutations則是一個會引起狀態改變的全部方法。正如咱們看到的，目前的state對象，其中的狀態就只有一個count。而mutations有兩個成員，它們參數爲state，在函數體內對state內的count成員作加1和減1的操做。

活仍是那些活，如今引入了一個store對象，把數據更新的活給攬過去，再也不須要vue實例本身計算了，代價是引入了新的概念和層次。那麼好處是什麼（一個土耳其古老的發問）？

vuex解決了組件之間共享同一狀態的麻煩問題。當咱們的應用遇到多個組件共享狀態時，會須要：

多個組件依賴於同一狀態。傳參的方法對於多層嵌套的組件將會很是繁瑣，而且對於兄弟組件間的狀態傳遞無能爲力。這須要你去學習下，vue編碼中多個組件之間的通信的作法。
來自不一樣組件的行爲須要變動同一狀態。咱們常常會採用父子組件直接引用或者經過事件來變動和同步狀態的多份拷貝。

以上的這些模式很是脆弱，一般會致使沒法維護的代碼。來自官網的一句話：Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態。這裏的關鍵在於集中式存儲管理。這意味着原本須要共享狀態的更新是須要組件之間通信的，而如今有了vuex，就組件就都和store通信了。問題就天然解決了。

這就是爲何官網再次會提到Vuex構建大型應用的價值。若是您不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。確實是如此——若是您的應用夠簡單，您最好不要使用 Vuex。