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

前言

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

npm安裝

　　npm install vuex?

開始使用

　　項(xiàng)目需求：實(shí)現(xiàn)購(gòu)物車商品增加和減少，并計(jì)算出商品的總價(jià)。

　　目錄結(jié)構(gòu)

?

　　準(zhǔn)備工作

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

import Vuex from 'vuex'

　　第二步注冊(cè)vuex組件

Vue.use(Vuex)

　　第三步實(shí)例化Store

　　state：保存的是原始數(shù)據(jù)，可以理解為需要共享的數(shù)據(jù)或狀態(tài)，

　　getters：可以理解為是staore的計(jì)算屬性，可以實(shí)現(xiàn)就store的計(jì)算，但是不能更改。例如你想知道兩個(gè)值相加、相乘。都是非常不錯(cuò)的選擇。

　　mutations：mutations中的方法可以對(duì)state中的數(shù)據(jù)進(jìn)行改變。

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

?　　代碼示例

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數(shù)據(jù)？

　　在組件內(nèi)部使用 this.$store.state.屬性名即可。

　　實(shí)例代碼：

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

　　如何在組件中使用getters內(nèi)的方法？

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

　　

?

　　如何在組件中使用mutations內(nèi)的方法？

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

　　如何在組件中使用actions內(nèi)的方法？

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

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/waitforyou/p/6784838.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。