Vue中watch用法

叁歲伎倆 2022-01-12 00:23 350阅读 0赞

> 这里结合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

发表评论取消回复

表情：

评论列表（有 0 条评论，350人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中watch相关用法

Vue中watch用法当需要在数据变化时执行异步或开销较大的操作时，使用侦听器 `watch` 的方式是最有用的监听某一数据的变化监听对象或数组的变化

清疚/ 2023年03月01日 05:45/ 0 赞/ 12 阅读

相关 vue中watch的用法

需求：输入框有内容时，按钮启用，没内容时按钮禁用 <el-input v-model="content"></el-input> <el-button :di

柔光的暖阳◎/ 2023年02月12日 06:25/ 0 赞/ 59 阅读

相关 VUE中watch用法

一、 watch是什么？监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值，用一个函数取代。简洁的说：watch的作用可以监控一个值的变换，

ゝ一世哀愁。/ 2023年02月09日 10:28/ 0 赞/ 51 阅读

相关 VUE_vue中watch的详细用法，watch深度监听，watch路由监听

handler：其值是一个回调函数。即监听到变化时应该执行的函数。 deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化

一时失言乱红尘/ 2023年01月21日 04:24/ 0 赞/ 26 阅读

相关 vue中watch的详细用法

[https://www.imooc.com/article/70010][https_www.imooc.com_article_70010] [https_www.im

灰太狼/ 2022年03月09日 07:50/ 0 赞/ 279 阅读

相关 vue中watch的详细用法

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法： <input type="text" v-model=

旧城等待，/ 2022年02月04日 23:51/ 0 赞/ 291 阅读

相关 vue中watch的详细用法

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法： <input type="text" v-model=

ゞ浴缸里的玫瑰/ 2022年02月01日 16:49/ 0 赞/ 353 阅读

相关 Vue中watch用法

> 这里结合cmputed实现 > index.vue <script> export default{ data(){

叁歲伎倆/ 2022年01月12日 00:23/ 0 赞/ 351 阅读

相关 vue中watch的详细用法

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法： <input type="text" v-model=

青旅半醒/ 2021年12月16日 07:07/ 0 赞/ 332 阅读

相关 Vue中 watch 的高级用法

转载自：[https://juejin.im/post/5ae91fa76fb9a07aa7677543][https_juejin.im_post_5ae91fa76fb9a

墨蓝/ 2021年09月18日 01:14/ 0 赞/ 391 阅读