vue监听watch或mutations

/mutations

vue监听watch

watch监听的属性的方法可以有两个值，一个新值，一个旧值

方法1:

    watch:{
        myVlaue:function(val,oldVal){}
    }

方法2:

//深度监听
watch:{
      pageSizeSel:{
        deep:true,
        handler:function () {
          this.pageCode=1;
          this.getData();
        }
      },
    }

当姓或名改变的时候,count+1,使用watch监听器

姓:<input v-model="firstName"/>

名:<input v-model="lastName"/>
<div>{{fullName}}div>
<div>{{count}}div>

vue设置

new Vue({
    el:"#root", /*绑定:id为root的*/
    data:{
        firstName:"",
        lastName:"",
        count:0
    },
    computed:{/*计算属性*/
        fullName:function(){
            return this.firstName+' '+this.lastName;
        }
    },
    watch:{
        /*监听firstName*/
        firstName:function () {
            this.count++;
        },
        lastName:function () {
            this.count++;
        }
    }
})

此处监听的是firstName和lastName,也可以监听fullName,只要fullName改变,就count++

全局变量监听mutation

比如需要监听state

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

Vue.use(Vuex);

const state = {//定义变量
    scale: "1:100W"
}
const mutations = {//监听
        setScale(state, scale) {//修改的方法
            state.scale = scale;
        }
    }

export default new Vuex.Store({
    state,
    mutations
});

调用,修改变量值

import store from '../store'
if (zoom <= 5 && sheetType != 1000000) {
    sheetType = 1000000;
    addSheetNumber(1000000);
    store.commit('setScale', "1:100W");
 } else if (zoom <= 7 && zoom >= 6 && sheetType != 500000) {
    sheetType = 500000;
    addSheetNumber(500000);
    store.commit('setScale', "1:50W");
} else if (zoom <= 9 && zoom >= 8 && sheetType != 250000) {
    sheetType = 250000;
    addSheetNumber(250000);
    store.commit('setScale', "1:25W");
}

在另一个页面中监听scale的值

<div>图幅{{$store.state.scale}}div>