理解Vuex

一、Vuex 是什麽？

首先我們來分析一種實際開發中用vue.js的場景，你有n個組件，當你改變一個組件數據的時候需要同時改變其它n個組件的數據，那麽我想你可能會對 vue 組件之間的通信感到崩潰 。

這個時候vuex作用就來了，它可以集中管理所有組件共享的數據，做到改一個而是全部組件進行同步更新。什麽意思呢？

下面用案例說明：

1. 單純依賴於vue.js

2. 依賴vue.js，也使用了vuex技術

目的是通過對比引出vuex的概念、優勢和劣勢。現在開始。

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

1、純vue.js代碼：

<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>

整個代碼結構非常清晰，代碼是代碼，數據是數據。代碼就是放在methods數組內的兩個函數inc、dec，被指令@click關聯到button上。而data內返回一個屬性count，此屬性通過{{count}}綁定到標簽p內。

2、依賴vue.js，也使用了vuex技術

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></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>

這兩個的區別在呢?

1、methods數組還是這兩個方法，這和demo1是一樣的；但是方法內的計算邏輯，不再是在函數內進行，而是提交給store對象！這是一個新的對象！

2、count數據也不再是一個data函數返回的對象的屬性；而是通過計算字段來返回，並且在計算字段內的代碼也不是自己算的，而是轉發給store對象。再一次store對象！

就是說vuex把組件中的數據和改變數據的方法給抽離出來，進行全局管理，這個時候你改變組件某一數據的時候，改變的全局的數據，那麽對於其它通過store.state.count

得到的count數據當然會一起改變咯。

Vuex 就是一個專為 Vue.js 應用程序開發的狀態管理模式。這個狀態自管理應用包含以下幾個部分：

• state，驅動應用的數據源；
• view，以聲明方式將 state 映射到視圖；
• actions，響應在 view 上的用戶輸入導致的狀態變化。

二、Store

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

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

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

// 如果在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

現在，你可以通過 store.state 來獲取狀態對象，以及通過 store.commit 方法觸發狀態變更：

store.commit(‘increment‘)

console.log(store.state.count) // -> 1

參考：

鏈接：到底vuex是什麽？

想太多，做太少，中間的落差就是煩惱。想沒有煩惱，要麽別想，要麽多做。上尉【3】

VueJs(14)---理解Vuex