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的原始数据。

 　　代码示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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.属性名即可。

　　实例代码：

?

1 2 3 4

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

　　如何在组件中使用getters内的方法？

?

1 2 3 4 5

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

　　

 

　　如何在组件中使用mutations内的方法？

?

1 2 3 4 5 6 7 8

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

　　如何在组件中使用actions内的方法？

?

1 2 3 4 5

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