记一次 vue 页面的computed中没有监听到store中属性变化的问题

最新推荐文章于 2025-04-11 09:28:54 发布

yifangshikong

最新推荐文章于 2025-04-11 09:28:54 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/yifangshikong/article/details/126529813

版权

前端专栏收录该内容

4 篇文章

订阅专栏

差了很多网上资料，都对不上我这个问题。

原来是compute中定义的变量在没有在页面中使用，导致一直没有进入compute中的对应方法。

真狗哇！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yifangshikong

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

这样监听不到值的变化（已解决，有情况可以）

weixin_40945354的博客

02-19

356

<!DOCTYPE html> <html> <div id="app"> <input type="text" v-model="name">{{name}} <input type="text" v-model="age">{{age}} <input type="text" v-model="obj.id">{{obj.id}} &l

vue 子页面监听vuex变化第一次发触发但是变化后不会监听只有手动刷新页面后才会有变化

周家大小姐

05-07

1853

有一个需求就是对每个用户的操作进行保存,我把数据存在vuex中,奇怪的是watch监听一开始是有变化的;但是数据改变后页面却监听不到,只能手动刷新页面数据才会实时监听到变化 html:页面存储 this.$store.dispatch('videoMonitorSystem/getUserInfoVideo', { data: params }) 下面看错误代码" /* * @Author: your name * @Date: 2022-04-28 11:15:44 * @La

参与评论您还未登录，请先登录后发表或查看评论

vue监听store.state中对象的变化不起作用

qq_39085895的博客

06-23

5366

store.state中的对象属性发生改变，引用state的组件中却监听不到变化，深度监听也不起作用，如下代码： // state.js noticeParams: [ { CODE: null, NoticeType: null}, { CODE: null, NoticeType: null}, { CODE: null, NoticeType: null} ] // 所引用组件 export default { methods: { profileJump(p

Vue3状态管理——storeToRefs 与 computed何时使用

热门推荐

weixin_54257364的博客

04-23

1万+

data里面是这样定义 arr:[], obj:{} 在methods中的某个事件会改变数组/对象中的元素 clickBtn () { 　　this.arr[0] = false 或this.arr = [false] } //或者 clickBtn () { 　　this.obj = { 　　 test:12312 　　} 　　或　　this.obj.test =12312 } 但在computed中监听不到这个数组中元素的变化 isAble() { //数组　　if (

vue3通过watch首次监听不到store数据变化

Cupid

08-11

3356

vue3通过watch首次监听不到store数据变化。

vue项目computed计算属性无法监听到数组对象内部变化解决方案

Taurus_666

06-30

8997

vue computed计算属性无法监听数组内部对象变化问题解决方案

vue之组件内监控$store中定义变量的变化详解

01-19

采用计算属性来获取$store中的值 computed: { listenstage() { return this.$store.state.iShaveMsg; } }, // 2.通过watch来检查定义计算属性获取到的值的变化 watch:{ listenstage: function(ov,nv){ ...

解决vue单页面多个组件嵌套监听浏览器窗口变化问题

11-19

在Vuex中，可以创建一个`resize`的state，然后在每个需要监听窗口变化的组件中，通过`mapState`或`computed`属性获取这个状态，并使用`watch`进行监听。 ```javascript // Vuex store state: { resize: null }, ...

vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

12-12

在`App.vue`的头部组件中，我们监听用户输入，当输入发生变化时，调用`this.$store.dispatch('setSearchKey', this.value)`将新值提交到Vuex store中。 ```javascript goSearch: function() { if (this.value) { ...

vue2 使用 window.open()打开新页面监听不到vuex的数据变化

momo_mom177的博客

02-24

2163

A页面 window.open() B页面， B页面computed 里面的值取store里面的值，A页面操作改变值，B页面 watch 不到该值的变化解决办法：存在local里面，然后监听storage修改, 但是这个只能解决A页面修改值B页面才能监听到，而如果B页面修改这个storage的值也不会被该方法监听到，太emo了，其实B页面改值 computed: { ...mapState('ceshi', { vuexValue: state => state.v

Vue 如何监听 localstorage的变化

askuld的博客

09-22

2472

在日常开发中，我们经常使用localStorage来存储一些变量。这些变量会存储在浏览中。对于localStorage来说，即使关闭浏览器，这些变量依然存储着，方便我们开发的时候在别的地方使用。

vue computed和watch的区别

高先生的猫

12-23

1287

computed 是一个计算属性（被计算出来的属性就是计算属性），不需要加括号，会根据依赖是否变化来缓存。展示用户名 //引用的是完整版Vue import Vue from "vue/dist/vue.js"; Vue.config.productionTip = false; new Vue({ data: { user: { email: "wuyouzhen@qq.com", nickname: "Luna", pho.

vuex管理公共状态，遇上状态变化但组件里没有检测到

weixin_41276201的博客

06-04

268

组件里用ref绑定该变量，但是发现当变量在其他地方修改后，组件里并没有检测到并更新。

vue2 计算属性computed，属性监听watch用法

qq_64658953的博客

12-19

1145

computed属性是基于它所依赖的数据进行计算，并且会缓存计算结果，只有当依赖的数据发生变化时，才会重新计算。watch是监听属性，它可以监听某个数据的变化，并在数据变化时执行相应的操作。watch属性可以监听一个或多个数据的变化，并在数据变化时执行指定的回调函数。watch属性适用于处理一个数据影响多个数据的场景，可以在回调函数中执行一些复杂的逻辑操作。总结一下，computed适用于一个数据受多个数据影响的场景，而watch适用于一个数据影响多个数据的场景。属性监听watch 用法。

关于Vue 组件中computed获取经getters变化的store中的state

qq_41261490的博客

07-31

1万+

问题描述：当computed中的属性是从store.state中获取的时候，我们拿到的属性值是store中state的初始值还是getters计算后的值？问题发现：页面中渲染是19，而vue-devtools中state还是18 引发的思考这是Store中的state和getters 这是组件中的computed 页面上展示的结果是：我打印thi...

Vue中使用watch监听Vuex中的数据变化以及vuex储存和读取

qq_44693047的博客

08-05

6238

Vue中使用watch监听Vuex中的数据变化以及vuex储存和读取

vue中央事件总线解决第一次进去之后不能监听，出来在进去就能触发监听

lyj15390447067的博客

04-20

1407

vue中央事件总线解决第一次进去之后不能监听，出来在进去就能触发监听

Vue_侦听器 watch 监听 computed 计算属性

Mr.小灰狼_随笔

08-26

2981

Vue_侦听器 watch 监听 computed 计算属性目录侦听器 watch handler immediate $watch() deep 项目简单使用：

vue2中vuex一个页面存数据，另外一个页面如何监听数据变化

10-29

在 Vue 2 中，Vuex 是用于管理全局状态的应用级状态容器，它可以帮助你在单页应用中跟踪和共享状态。如果你在一个页面上通过 Vuex 存储了数据，并希望在另一个页面监听这个数据的变化，你可以按照以下步骤操作： 1. **注入 store**: 首先，在需要访问 state 的组件中使用 `store` 注入，例如在 `main.js` 或者每个页面的 `setup()` 函数里： ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import store from './store'; const app = createApp(App); app.use(store); app.mount('#app'); ``` 2. **获取数据**: 使用 `mapState` 或 `mapGetters` 映射到组件的数据选项里，以便直接访问 Vuex 中的状态。例如： ```javascript // 在组件里 export default { computed: { myData () { return this.$store.state.myData; } }, }; ``` 3. **监听变化**: 如果你需要实时监听数据的变化，可以使用 `watch` 属性或者 `mapActions`、`mapMutations` 来处理 store 中的 mutation 或 actions。例如，如果你想监听 `myData` 变化： ```javascript export default { watch: { $store: { deep: true, // 深度监听 handler(newState) { console.log('myData changed:', newState.myData); }, immediate: true, // 初始化时也触发 }, }, }; ``` 4. **分发 actions** 或 **提交 mutations**: 当数据源更新时，通过调用 actions 进行异步操作，然后在 mutations 中修改状态。例如： ```javascript actions: { updateMyData({ commit }) { axios.get('/api/data') .then(response => commit('updateMyData', response.data)) .catch(error => console.error(error)); }, }, mutations: { updateMyData(state, newData) { state.myData = newData; }, } ```