vuex学习

vuex最简单的应用

<script>
const store = new Vuex.Store({
	state:{
	//存储数据
		num:0
	},
	getter:{
	//state的计算属性
	//从state获取数据
	},
	mutations:{
	//更新state逻辑
		addEvent(state){
		state.num++
		}
	},
	actions:{
	//出发mutations
	}
})
//相当于store的getter

console.log(store.state.num)
store.commit(addEvent)
console.log(store.state.num)
</script>

vuex 简单的同步和异步


<body>
<div id="root">
<h1>{{num}}</h1>
<button @click="addBtn">+</button>
<button @click="minsBtn">-</button>
<button @click="xxBtn">x</button>
</div>
</body>
<script>
const store = new Vuex.Store({
	state:{
	//存储数据
		count:0
	},
	getter:{
	//state的计算属性
	//从state获取数据
	},
	//计算属性 computed 相当于是getter 可以获取值
	computed:{
	num(){
	return store.state.count
	}
	},
	mutations:{
	//更新state逻辑
		addFn:state=>state.count++,
		minsFn(state){
		state.count--
		}
	},
	actions:{
	//出发mutations
		xxFn(){
			setTimeout(()=>{
				console.log("2222")
			},2000)
		}
	}
})

new Vue({
	el:"#root",
	//计算属性 computed 相当于是getter 可以获取值
	computed:{
	num(){
	return store.state.count
	}
	},
	//同步
	methods:{
	addBtn(){
		store.commit("addFn")
	},
	minsBtn(){

		store.commit("minsFn")
	},
	xxBtn(){

		store.dispatch("xxFn")
	}
	}
})
</script>

posted on 2020-02-07 13:47  造粪机器  阅读(169)  评论(0)    收藏  举报

导航