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

　　

?

轉載于:https://www.cnblogs.com/waitforyou/p/6784838.html

總結

以上是生活随笔為你收集整理的vuex 实现vue中多个组件之间数据同步以及数据共享。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。