Vue中watch用法

这里结合cmputed实现

index.vue

<script>
    export default{
        data(){
            return{
                
            }
        },
        computed:{
            ...mapState(['userName']),//这里引入vuex中state中的值
            uname:{//注意：这里名称不可与vuex中定义的名称一样
                get(){
                    return this.userName?this.userName:{};
                }
            }
        },
        watch:{
            uname:{
                handler(now,old){
                    console.log(now);
                },
                deep:true,//设置deep: true 则可以监听到cityName.name的变化，此时会给cityName的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。
                immediate:true//immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
            }
        }
    }
</script>
复制代码

#vuex store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        userName:{}
    },
    mutations:{//同步
        changeUname(state,val){
            state.userName = val;
        }
    },
    actions:{//异步
        cahgeMuname(muName,data){
            muName.commit('changeUname',data);
        }
    }
})复制代码

转载于:https://juejin.im/post/5cff1aac5188254c43467ba3