首页 > 其他分享 >Vuex进行两个页面逻辑交互

Vuex进行两个页面逻辑交互

时间:2024-11-06 08:46:32浏览次数:4  
标签:vuex Vuex state setMessage message 交互 监听 页面

问题

当一个页面由两个Vue文件构成的时候,如果在一个vue文件的时候进行了操作,那么需要将操作得到的数据传递给另外一个文件,那么另外页面就需要能够监听到前面这个页面的数据变化

解决方案

其实解决的方案就是通过vuex来进行实现,步骤如下:

  • 页面1当点击提交按钮的时候,调用vuex的保存方法,将文本内容存储到vuex中
  • 然后页面2使用watch钩子函数,监听 vuex中内容的变化,如果改变了,那么就执行对应的函数

具体代码如下

首先我们需要定义一个message状态,用于存储我们需要发送的内容

import {SET_MESSAGE} from './mutation-types'

const app = {
  // 全局状态
  state: {
    // 消息,用于更新
    message: {}
  },
  // getters是对数据的包装,例如对数据进行拼接,或者过滤
  getters: {
    // 类似于计算属性
    // 增加的方法
  },
  // 如果我们需要更改store中的状态,一定要通过mutations来进行操作
  mutations: {

    [SET_MESSAGE] (state, message) {
      state.message = message
    }
  },

  // actions是我们定义的一些操作,正常情况下,我们很少会直接调用mutation方法来改变state
  actions: {

  }
}
export default app

然后在页面1的时候引入

// vuex中有mapState方法,相当于我们能够使用它的getset方法
import {mapMutations} from 'vuex'

然后在method方法中,解析出刚刚我们定义的setMessage

methods:{
    // 拿到vuex中的写的方法
    ...mapMutations(['setMessage']),
}

最后在我们点击的时候,调用setMessage方法

// 存储到vuex中
this.setMessage(message)

这样,我们的消息就放到了vuex中了,下面我们在页面2,添加watch的钩子函数,用于监听vuex中message状态的变化,如果改变了就会触发,那么我们就可以在这里编写业务逻辑代码了

  watch: {
    '$store.state.app.message': function (newFlag, oldFlag) {
         console.log('监听到页面1的变化')
         // 进行业务逻辑处理
     }
}

标签:vuex,Vuex,state,setMessage,message,交互,监听,页面
From: https://blog.csdn.net/qq_44182424/article/details/143556883

相关文章

  • 通过VITE/rollup实现一个工程的代码分别打包成SPA(单页面应用)和MPA(多页面应用)
    问题背景我们的客户开发的系统会销售给多个不同的单位使用,并且是需要私有化部署的。在有的客户那里,直接部署完就结束了。但是另外一些客户,提出了一些特别的要求。他们要求我们的系统只需要提供一个个功能页面,无需提供菜单管理等功能。功能页面的调度、管理、权限等工作,则是由......
  • 浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
    文章目录前言浏览器中输入URL返回页面全过程DNS域名解析过程TCP的三次握手、四次挥手一、浏览器中输入域名二、解析域名2.1具体过程2.2知识补充2.2.1域名体系结构2.2.2查询方式——递归查询、迭代查询2.2.3DNS域名解析过程三、浏览器与目标服务器建立T......
  • aria-hidden属性与页面交互问题
    1.背景与问题1.背景页面中表格有60多条数据,在不做分页处理的情况下,设置表格的最大高度,展示滚动条。2.问题在对前二十条已经展示在页面上的数据进行操作时,没有问题。滚动表格展示出新数据时,对数据进行操作,会有如图报错。并且对于新数据的操作并不生效。2.aria-hidden属性......
  • 六款高颜值注册页面(可复制源码)
    和昨天的一样,带来了六款注册界面,可复制源码(需要定制请加微信)第一款–简约风格HTML<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1......
  • 鸿蒙开发进阶(HarmonyOS )加速Web页面的访问
     鸿蒙NEXT开发实战往期必看文章:一分钟了解”纯血版!鸿蒙HarmonyOSNext应用开发!“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线!(从零基础入门到精通)HarmonyOSNEXT应用开发案例实践总结合(持续更新......)HarmonyOSNEXT应用开发性能优化实践总结(持续更新......)当Web页......
  • 【前端】六款高颜值登录页面
    原创吴旭东无限大infinity第一款–简约风格HTML:<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • 阶段练习三.新闻页面实现
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <title>Document</title>  ......
  • Rust 使用 ORM 进行数据交互
    在本节中,我们将深入探讨如何使用Rust中的ORM(对象关系映射)库,特别是Diesel,进行数据交互。我们将涵盖从安装和配置到实际的CRUD操作,再到如何优化查询和性能提升的最佳实践,以帮助开发者建立高效、可维护的数据驱动应用。1.使用Diesel或其他ORM库1.1Diesel的安装与配......