Vuex 购物车的实现

组件化 数据驱动 - vue
代码复用 减少DOM操作
组件间数据传递 vuex
保持各个组件之间 数据一致

复习router-view

猜想
vuex store - 定义数据

其他组件 引用 和 修改数据

localStorage 缓存数据获取和设置

created(){
	var count = localStorage.getItem('count')
	if(!count){
		count = 1
		localStorage.setItem('count',1)
	}
	this.count = count
}

父组件 -> 子组件传值

#子组件标签上  定义属性
<Son count="count"></Son>
#子组件内部接受
Mounted(){
	props:[count]
}
#子组件数据驱动
v-bind:value="count"  // v-bind === :

子组件 -> 父组件

#子组件
@change = "countChange"
methods : {
		countChange({
			this.$emit('自定义事件'，传值)
	}
}
#父组件
@自定义事件="a"
method :{	
	a(){
		逻辑
}
}

Vuex : cnpm install vuex -S

定义仓库

#main.js

import Vuex from 'Vuex'
Vue.use(Vuex)

var store = new Vuex.Store({
    #数据
	state : {x:1}
	#方法
	mutation :{
		updateData(state,arg){
			state.x = arg
	}
}
})

使用仓库

使用数据
{{this.$store.state.xxx}}
修改数据
this.$store.commit('updateData',num)