这里结合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);
}
}
})复制代码