首页 > 其他 > 详细

vuex单页面计数器

时间:2019-09-29 16:03:06      阅读:83      评论:0      收藏:0      [点我收藏+]
<div id="app">
    <p>{{count}}</p>
    <p>
        <button @click="addclick">+</button>
        <button @click="reduceclick">-</button>
    </p>
</div>
let store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        add:state => state.count++,
        reduce:state => state.count--
    },
    actions:{
//        add(){
//            store.commit(‘add‘)
//        },
//        reduce(){
//            store.commit(‘reduce‘)
//        }
        add(){
            return new Promise(resolve=>{
                setTimeout(function(){
                    store.commit(‘add‘);
                    resolve()
                },1000)
            })
        },
        reduce(){
            return new Promise(resolve=>{
                setTimeout(function(){
                    store.commit(‘reduce‘)
                },1000)
            })
        }
    }
})
let vm = new Vue({
    el:‘#app‘,
    data:{},
    computed:{
        count(){
            return store.state.count
        }
    },
    methods:{
        addclick(){
            store.dispatch(‘add‘)
        },
        reduceclick(){
            store.dispatch(‘reduce‘)
        }
    }
})

 

vuex单页面计数器

原文:https://www.cnblogs.com/liufeiran/p/11608044.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!