vue 怎么监听变量值_Vue组件怎么监听全局变量变化

最新推荐文章于 2024-06-22 18:47:23 发布
最新推荐文章于 2024-06-22 18:47:23 发布
阅读量2.4k 收藏
点赞数
文章标签： vue 怎么监听变量值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36046574/article/details/113686990
版权
本文介绍了在Vue中使用Vuex管理状态时，如何监听全局变量`this.$store.state.online`的变化并实时更新组件。通过在`mounted`钩子和方法中设置数据，并尝试在登录和登出时更新`online`状态，但遇到了状态变更不实时反映到`this.online`的问题。示例代码展示了模板、数据、挂载方法和退出登录的方法。
摘要由CSDN通过智能技术生成

用

this.$store.state.online

来记录登录状态，然后导航栏根据

this.online

来显示不同的选项。

this.$store.state.online

会在渲染完导航栏后发送ajax改变，也会在登录后改变。

但是无论是用mounted还是compute，当

this.$store.state.online

改变时，都不会改变

this.online

所以造成的现象就是，登陆完，只有刷新页面，才会更新

this.online

<template>

<nav id="navbar" class="nav">

<router-link to='/' class="brand">Finn</router-link>

<ul class="nav-right">

<router-link to='/' class="nav-item">主页</router-link>

<a @click='logout' class="nav-item nav-item-link" v-if="online">退出登录</a>

<router-link to='/login' class="nav-item" v-else>登录</router-li

最低0.47元/天 解锁文章
研之成理
关注
vue 怎么监听变量值_Vue对变量的监控
weixin_39766071的博客
12-20 2759
Vue对变量的监控watch: {a(val, oldVal) {//普通的watch监听if (val == "1") {$('#myModal').modal();}else {$('#myModal').modal('hide');}}}Vue对于变量的深度监控watch: {item1: {handler: function (val) {alert("改变了")},deep: true}...
揭开 Vue3 响应式系统的神秘面纱：多种监听状态变量变化的方法大揭秘
andy_68147772的博客
12-20 1300
这是一篇关于 Vue 3 响应式系统的文章，介绍了如何使用watch、watchEffect、computed和ref等方法来监听状态变量的变化。这些方法可以帮助开发者更加灵活地响应状态变化，实现复杂的交互逻辑，从而构建高效、可靠的应用程序。
Vue页面监听数据变化
codezha的博客
07-19 2763
最近开发遇到这样一种情景，某个页面需要根据路由query查询参变化执行对应的操作，放在生命周期钩子函数里面都不太合适，因为生命周期钩子函数是针对组件的不是针对页面的，所以需要通过watch监听路由query查询参的变化，代码如下： watch: { '$route.query': { if (this.$route.query.xx) { //根据xx参数值的情况，执行对应的操作.... } }, deep: true } ...
Vue3 监听属性
最新发布
thinkpad38的博客
06-22 372
本章节，我们将为大家介绍 Vue3 监听属性，我们可以通过来响应数据的变化。的作用是用于监测响应式属性的变化，并在属性发生改变时执行特定的操作，它是 Vue 中的一种响应式机制，允许你在数据发生变化时做出相应的响应，执行自定义的逻辑。使得在响应式属性变化时能够有更多的控制权和灵活性，让你的组件能够更好地响应数据的变化并执行相应的逻辑。
iview-admin 学习 03 设置全局变量
无为萌新
04-22 512
1.新建vue文件 src/view/standard/Global.vue <script> /** * * @title 公共常量 * @Description 公共常量 * @Author chenglf * @Date 2020/4/21 * @params * @return **/ /** * 会话框模态框等Title * @type {string}...
vue3监听变量（包括对象、数组的特殊用法）
qq_39157025的博客
06-05 5244
【代码】vue3监听变量（包括对象、数组的特殊用法）
Vue 3中实现全局变量的供响应式共享并watch动态监听全局变量
weixin_48853103的博客
04-14 3584
在Vue 3中，可以使用createApp函数创建Vue实例，然后使用provide和inject来实现全局变量的共享。使用provide和inject可以共享普通的JavaScript对象和变量，但是当我们需要共享响应式对象时，需要使用reactive方法来创建响应式对象。
实现vue监听全局变量
qq_33287746的博客
11-05 1万+
实现vue监听全局变量 场景：在一个全局函数中需要根据不同的条件改变一个全局变量的值，并在另一个页面中展示这个全局变量。在监听一个事件时调用该全局函数，全局变量的值会随之更新，但是在另一个页面中始终显示的是全局变量的初始值。如何使全局变量进行刷新。 网上也没有找到可行的办法，要么说的很简洁，要么不可行。所以自己也试了很多方式，终于用vuex的Mutation实现了全局变量刷新。mutation用于...
在vue里面设置全局变量或数据的方法
11-28
在Vue.js框架中，设置全局变量或数据是十分常见的需求，尤其在大型项目中，为了在各个组件之间共享状态和信息，全局变量的使用显得尤为重要。本文将详细讲解如何在Vue中实现全局变量的设置，并提供一个实际示例。 ...
vue2 全局变量的设置方法
08-27
全局变量模块挂载到 Vue.prototype 里，可以使得全局变量在所有组件中都可以访问。例如，我们可以在 main.js 中添加以下代码： ```javascript import global_ from './components/tool/Global' Vue.prototype....
Vue 3中监控响应式变量的几种方式
qq_47993287的博客
12-04 601
在Vue 3中使用computed，watch和watchEffect监控响应式变量的变化。
详细介绍Vue3中的监听属性的概念、使用方式以及一些常见的应用场景
网络技术联盟站
07-18 7216
setup() {})})return {
vue3【watch检测/监听】watch检测数据变化&&监听使用
XSL_HR的博客
10-16 9900
本期将深入了解vue中 watch 监听数据的响应式变化和对数据的检测。
vue项目中 全局监听参数的变化
qq_42183923的博客
11-22 4821
项目背景 因为一个页面的功能比较多，会拆分了很多组件，但是数据却要共用同步的情况 一，vuex 声明全局变量 import getters from './getters' import app from './modules/app' export default new Vuex.Store({ modules: { app, }, state: { analysisJSON: {}, // 事件分析的对象json }, mutations: { setAna
Vue3中怎么监听store中state的数据变化
01-16 3266
函数是Vue 3中的一个新函数，它可以自动追踪其依赖项，并在依赖项发生变化时执行回调函数。如果只是简单地监听state的变化并执行相应的操作，建议使用。属性来监听store中的state的变化。函数来监听store中的state的变化，并在回调函数中执行相应的操作。如果需要对state进行细粒度的监听，并执行相应的操作，建议使用。如果需要动态地监听state的变化，并执行相应的操作，建议使用。函数来监听store中的state的变化时，你可以使用。属性的getter函数中执行相应的操作。
vue3 监听vuex里的数据变化
初竹殇的博客
01-17 9680
import { computed, watch, } from 'vue'; const getShowTask = computed(()=>{ //返回的是ref对象 return store.state.监听的字段; }) watch(getShowTask, (newVal, oldVal) => { console.log('newVal, oldVal', newVal, oldVal) }, {immediate:true,deep:true}); ...
Vue监听全局变量
热门推荐
bigname22的博客
12-12 1万+
Vue监听全局变量项目中，有两个页面需要用到实时的二维码(二维码信息5秒更新一次)，所以计划吧这部分抽成全局Util来做，二维码信息在Util中定义为qrCodeMsg。 意思是：APage.vue页面想绑定Util.vue中的qrCodeMsg属性，但qrCodeMsg改变的时候，APage.vue并没有跟着改变。 APage.vue中使用： <div>{{this.Util.qrCodeM
vue监听全局变量变化
05-05
在 Vue 中，可以使用 `$watch` 方法监听全局变量的变化。 假设你要监听一个名为 `globalVar` 的全局变量，可以在 Vue 实例中使用 `$watch` 方法： ```javascript new Vue({ data: { // ... }, created() { this.$watch('$root.globalVar', (newVal, oldVal) => { // 处理变化 }) } }) ``` 这样，在全局变量 `globalVar` 发生变化时，`created` 钩子函数中的回调函数就会被触发。其中，`$root` 属性指向 Vue 根实例，因此可以使用 `$root.globalVar` 访问全局变量。 另外，如果你想要在多个组件中监听全局变量的变化，可以在 Vue 原型上定义一个 `$globalWatch` 方法： ```javascript Vue.prototype.$globalWatch = function (name, handler) { this.$watch('$root.' + name, handler) } ``` 这样，在任何组件中都可以通过 `this.$globalWatch('globalVar', handler)` 来监听全局变量的变化了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值