vuex 實現vue中多個組件之間數據同步以及數據共享。

http://pan.baidu.com/s/1hrJfpli  demo下載地址

前言

　　在一些項目中有很多數據狀態之間要實現數據共享狀態共享，例如購物車的數據、用戶的登錄狀態等等。vue父元素是可以通過props向子元素傳遞參數，子元素也可以通用smit向父元素傳遞參數。但是像購物車這種在項目中多個位置的引用時就會變得很麻煩。例如項目中使用了三個購物車的組件，那么當其中一個組件的值發生改變時，就要通過自身告訴父組件我的值發生改變了，然后父組件在通知其他兩個購物車組件值發生改變了，需要進行同步，這樣就會變得很麻煩。而vue-v就可以幫助我們解決這個繁瑣的問題。

npm安裝

　　npm install vuex 

開始使用

　　項目需求：實現購物車商品增加和減少，並計算出商品的總價。

　　目錄結構

 

　　准備工作

　　第一步要引入在main.js中引入 vuex

import Vuex from 'vuex'

　　第二步注冊vuex組件

Vue.use(Vuex)

　　第三步實例化Store

　　state：保存的是原始數據，可以理解為需要共享的數據或狀態，

　　getters：可以理解為是staore的計算屬性，可以實現就store的計算，但是不能更改。例如你想知道兩個值相加、相乘。都是非常不錯的選擇。

　　mutations：mutations中的方法可以對state中的數據進行改變。

　　action：action中的方法可以調用mutations中的方法，但不可修改state中的原始數據。action中的函數可以使用ajax的技術對服務器進行數據交互。並且可以在回調中使用commit調用mutations中的方法，例如通過context.commit('increment', price)increment是需要調用mutations中的方法名，price是需要傳入的參數。 mutations中的方法再去更改state的原始數據。

 　　代碼示例

let store = new Vuex.Store({
  state: {
    totalPrice: 0
  },
  getters: {
    getTotal (state) {
      return state.totalPrice*2
    }
  },
  mutations: {
    increment (state, price) {
      state.totalPrice += price
    },
    decrement (state, price) {
      state.totalPrice -= price
    }
  },
  actions: {
    increase (context, price) {
      context.commit('increment', price)
    }
  }
})

　　如何在組件中獲得state數據？

　　在組件內部使用 this.$store.state.屬性名即可。

　　實例代碼：

 　　computed: {
      totalPrice () {
        return this.$store.state.totalPrice
      }

　　如何在組件中使用getters內的方法？

computed: {
  getTotal () {
    return this.$store.getters.getTotal
  }
}

　　

 

　　如何在組件中使用mutations內的方法？

 methods: {
      addOne () {
        this.$store.commit('increment', this.price)
      },
      minusOne () {
        this.$store.commit('decrement', this.price)
      }
    }

　　如何在組件中使用actions內的方法？

 methods: {
      addOne () {
        this.$store.dispatch('increase', this.price)
      }
    }