vuex学习
Posted dennylau
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>以上是关于vuex学习的主要内容，如果未能解决你的问题，请参考以下文章