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