首页 > 其他分享 >vue2组件中监听vuex中state的值

vue2组件中监听vuex中state的值

时间:2024-05-28 17:34:19浏览次数:27  
标签:Vuex mapState state vue2 组件 message vuex 监听

vue2组件中监听Vuex 中state的值可以使用 mapState

官网链接:

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。Getter | Vuex (vuejs.org)

参考文档:

使用方法:

1. Vuex 中数据: state:{ message:"" } 

2. 在组件A中导入 mapGetters :import { mapState } from 'vuex' 

3. 在组件A的计算属性中使用对象展开运算符将 getter 混入 computed 对象中:

//  A组件中映射 state数据 到计算属性
    computed: {
        ...mapState(['message'])
    }

4. 在组件A的watch中监听message:

watch: {
    // 监听vuex中的数据
    message(newValue,oldValue) {
        console.log('监听vuex中的message | newValue', newValue);
        console.log("oldValue",oldValue)
    }
}

 

标签:Vuex,mapState,state,vue2,组件,message,vuex,监听
From: https://www.cnblogs.com/sunshine233/p/18218501

相关文章

  • .net core的WebAPI+Vue2实现调用设备拍照上传图片功能
    在工作中有时候会遇到上传文件上传图片或者拍照上传图片功能。这时候底下的内容就有可能可以帮助到你。后端的支持上传图片和上传文件功能。前端如果你选择普通上传功能就是普通上传功能,我这里选择的是调用相机设备实现拍照上传图片功能。1.首先这是后端的控制器接口。1///<......
  • vue2+uni-app的实现的动态数据显示
     1:所用技术:Vue2.X,Uview2.0,确保项目上已经安装了Vue2.X 版本和组件Uview(注:其余组件:如ElementUI组件也适用,主要是样式的区别)2:template层<template> <viewclass="NavPage"> <viewclass="LoginCard"> <uni-cardis-shadow:trueclass="CardLogin"......
  • vue2.2——cdn如何使用插槽
    <mynav><h1slot="h1">我是具名插槽</h1><h2slot="h2">我没有命名</h2></mynav>letcp_template={mynav:{template:`<divstyle="color:red;"><......
  • Vue2批量全局注册组件
    创建一个文件(例如global-components.js),并在其中实现批量注册组件的逻辑。//src/global-components.jsimportVuefrom'vue';//自动导入components目录下的所有.vue文件constrequireComponent=require.context(//组件目录的相对路径'./components',//是......
  • React useState修改对象
    在React中,useState是一个Hook,它可以让函数组件拥有状态。当想要改变一个对象类型的状态时,我们需要使用展开运算符(...)或者Object.assign来确保状态是正确地更新。以下是一个使用useState来更新对象的例子://App.jsximportReact,{useState}from'react'f......
  • React useState数组新增和删除项
    在React中,我们可以使用useState钩子来管理组件的状态,其中包括数组。如何在React函数组件中对数组进行增加和删除项的操作?新增项时:我们可以对原数组进行解构,并把新增项一起加入到新数组;删除项时:我们使用Array.filter()进行筛选删除指定项,以下是一个简单的例子。//Ap......
  • GCC编译遇到“a label can only be part of a statement and a declaration is not a
    问题原因:switch中case里面的局部变量出错解决方法:将case里面定义的局部变量在switch外面定义。//报错情况switch(fork()){case-1:error(1,errno,"fork");case0://子进程执行命令if(execvp(args[0]......
  • SwiftUI中的手势(TapGesture、LongPressGesture、GestureState的使用)
    手势操作在App中可谓是用途非常广泛了,常规的手势修饰符有TapGesture点击手势、LongPressGesture长按手势、DragGesture拖拽手势,MagnificationGesture放缩手势和RoationGesture旋转手势。和常规的修饰符方法类似,只要将手势修饰符添加到视图中,系统就会自动识别用户的操作,并......
  • Vue搭建移动端h5项目(已开源,附带git地址)Vant+Vue Router+Vuex+axios封装+案例交互+部分
    一、项目介绍以及项目地址             项目介绍:vue2搭建。项目通过amfe-flexible与postcss-pxtorem实现移动端适配;通过Vantui作为项目的组件库;通过Vuex管理数据状态,进行模块化管理;通过VueRouter配置项目路由,进行模块化管理;封装axios进行数据的请求,以及一些页......
  • WPF多显示器问题 - WindowState
    标签 wpf multiple-monitors一段时间以来,我一直试图让我的WPF应用程序跨越多个监视器,并且几乎可以正常工作。当我设置以下行时,问题似乎出现了:win1.WindowState=WindowState.Maximized这会导致应用程序仅跨越主屏幕。我的代码如下:publicpartialclassApp:App......