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