vue监听watch或mutations

最新推荐文章于 2023-12-14 18:22:59 发布

ziyue7575

最新推荐文章于 2023-12-14 18:22:59 发布

阅读量89

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_36254947/article/details/133810439

版权

本文介绍了Vue中的watch方法监听属性变化，包括基本用法和深度监听，并展示了如何在Vuex中使用mutation监听并修改全局state。实例涵盖了监听输入框变化、全局变量的修改与页面间的state同步。

摘要由CSDN通过智能技术生成

/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"/>
<!--v-model双向绑定,当INPUT中的内容变的时候,下面div中的内容也会变-->
名:<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");
}