如何监听vuex中的变量参数变化,用watch!

简介: 如何监听vuex中的变量参数变化,用watch!

方法1【推荐:代码量最少】

watch: { 
    '$store.getters.vuex变量'(d) {
        console.log(d);
    },
},

方法2

created() {
    this.$store.watch((state) => {
        console.log(state.vue变量);
    }
},

方法3

computed: {
    vuex变量() { return this.$store.state.vuex变量 },
},
watch: {
    vuex变量(d) {
        console.log(d);
    },
},

方法4

import { mapGetters } from "vuex";
computed: {
    ...mapGetters(["vux变量"]), 
},
watch: {
    vux变量(d) {
        console.log(d);
    },
},

方法5

import { mapState } from "vuex";
computed: {
    ...mapState(["vux变量"]), 
},
watch: {
    vuex变量(d) {
        console.log(d);
    },
},


相关文章
Vue3中怎么监听store中的数据变化
Vue3中怎么监听store中的数据变化
|
Python
DataFrame排序和排名案例解析
本文演示了如何使用pandas对DataFrame进行排序和排名。首先,通过`pd.DataFrame()`将字典转换为DataFrame,然后利用`sort_values()`按'年龄'列进行升序排序。此外,还使用`rank()`方法为'年龄'列生成排名,并将其添加到DataFrame中作为新的'年龄排名'列。
405 0
|
消息中间件 Java Spring
SpringBoot实现RabbitMQ的简单队列(SpringAMQP 实现简单队列)
SpringBoot实现RabbitMQ的简单队列(SpringAMQP 实现简单队列)
271 1
|
移动开发 小程序 前端开发
uni-app组件样式修改不生效
uni-app组件样式修改不生效
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
4107 0
|
前端开发 JavaScript API
【第15期】一文读懂前端Astro框架
【第15期】一文读懂前端Astro框架
1356 0
|
JavaScript
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass,以及安装node-sass可能遇到的版本冲突问题
这篇文章介绍了在Vue项目中安装node-sass和sass-loader时遇到的版本冲突问题,并提供了解决这些问题的方法,包括在不降低node版本的情况下成功安装node-sass。
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass,以及安装node-sass可能遇到的版本冲突问题
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
4643 0
|
JavaScript
VUEX 使用学习五 : getter
VUEX 使用学习五 : getter
186 0