vue新窗口/标签页vuex不共享问题

已于 2024-04-16 23:18:47 修改
阅读量741 收藏 1
点赞数 2
文章标签： vue.js 前端 javascript
于 2023-07-24 18:39:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43336525/article/details/131902153
版权

现在有一个需求：所有向后端发出的请求都需要带token。所以打算将token放到vuex中存储，在每次请求响应的时候将token携带发过去。

但遇到这么一个问题：在主页中通过按钮打开一个新窗口（window.open），这个新窗口向后端发送请求时没有携带token！！！

const { href } = this.$router.resolve({
  path: '/newLinkPage',
  query: {
  }
})
window.open(href, '_blank')

原因是因为vuex是保存在标签隔离的内存空间里面的数据，新标签与之前的标签页不是同一个vue实例，开启了新标签页后可以认为是重新走了一遍Vue页面的生命周期，vuex的数据在新打开的页面就没了。 

解决思路：可以使用localStorage或者cookie 

 

wenjing:)
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3.0 用vuex 管理页面刷新，兄弟、无关联页面刷新
zjdygdcq的博客
06-30 310
首先在用到的组件里引入vuex import { useStore } from "vuex"; setup(){ const store = useStore(); } 1.操作页面commit出一个函数 vuex中接收并让vuex中state中某个值做个取反 const postClient = async() => { const furHttp = await http.post('clientsave',clients.list) ...
vue.zip（多标签页vuex）
05-15
在多标签页后台管理系统中，Vuex是至关重要的，因为它允许各个标签页之间共享和同步数据，确保了整个应用状态的一致性。例如，用户在某个标签页进行的操作，如添加或删除数据，可以通过Vuex在其他标签页中实时反映...
vuex-iframe-sync-iframe /窗口之间的Vuex状态同步。-Vue.js开发
05-27
vuex-iframe-sync英文| 中文iframe /窗口之间的Vuex状态同步您的明星是对我的最大鼓励。 :sparkles:功能：支持ifra vuex-iframe-sync英文| 中文iframe /窗口之间的Vuex状态同步您的明星是对我的最大鼓励。 :sparkles:功能：支持在加载iframe时进行iframe / window同步初始化同步，以根据您的特定需求配置同步行为:wrench:要求Vue.js（v2.0.0 +）Vuex（v2.1.0 +）注意window.postMessage对消息有限制，类似于JSON.parse（）和JSON.stringfy（）。如果遇到问题，请在广播
vue vuex 可以多个页面同步数据吗_前端开发：Vue中Vuex的原理以及使用
weixin_36448411的博客
02-04 1456
在前端开发工作中，Vue.js的使用是主流技术，尤其是项目开发过程中只要使用到涉及Vue的状态管理就必然会用到Vuex。本篇博文就来分享一下关于Vuex的相关知识点，方便后期查阅使用。 1、首先来了解一下Vuex是什么？ 官方文档是这样介绍的:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式...
【vue2新增页面跳转列表页，当前页面不会刷新问题，有效果的点个赞嗷】
demotang的博客
05-31 545
解决vue2新增页面走路由，跳转列表页，当前页面不会刷新问题。
vue使用window.open(), vuex数据不共享的问题
GiveMeFiveYu的博客
11-24 1939
问题还原： vue项目中采用了window.open()，浏览器打开新的标签页，原标签页中修改vuex存储的数据发生修改，新打开的标签页无法监听到数据修改。 解决方案： 采用localStorage， 原标签页存储数据到localStorage，新的页面监听localStorage存储的值（如果新页面无法监听到，可采用定时器）； 注意：定时器页面销毁的时候记得关闭掉； ...
vue中打开多个标签页能否共享vuex数据？
旺旺
10-24 5324
背景
解决页面刷新vuex失效（vuex-persistedstate）
weixin_42289080的博客
05-11 1043
然后正常使用vuex即可。
js中新标签页sessionStorage无法共享问题
南途的博客
04-15 1258
(function() { const AuthCode = () => sessionStorage.getItem('Auth-Code'); const secretKey = () => sessionStorage.getItem('secretKey'); if (!AuthCode() || !secretKey()) { // 这个调用能触发目标事件，从而达到共享数据的目的 localStorage.setItem('getSes...
使用vue/vuex/redux开发的卖座网
最新发布
06-05
为了实现这一平台的功能，使用了现代前端技术Vue.js，结合Vuex或Redux来进行状态管理。以下是对该项目技术栈的详细描述： ### 技术栈 1. **Vue.js** Vue.js 是一个渐进式 JavaScript 框架，主要用于构建用户界面。...
Vue + Elementui实现多标签页共存的方法
12-12
这个主题，早在一年前就已经创建，也写了一些内容，碍于在应用上体验始终不够... 通过 vuex 来使关闭页不被缓存 核心代码 定义 vuex 的跨页变量（store/index.js) import Vuex from 'vuex' Vue.use(Vuex) export
vue-stator:基于Vue.observable（）的Vuex替代
04-28
为了使从Vuex的过渡变得容易，它为操作引入了新的功能签名，有助于在需要时使它们看起来像是突变。 假设您有一个定义全局动作的store/actions.js文件： export function myAction ( { state , actions } , param ...
不同页签vuex同步
weixin_43688414的博客
12-01 1123
不同页签vuex同步
解决sessionStorage在同一网站下不共享的问题
weixin_42432439的博客
02-27 3940
一开始用localStorage，不论打开多少个页面，哪怕关掉重新打开，同一个网站下的存储的数值还在，问题是，不能同时登录多个账户，以及设置过期时间等 后来启用sessionStorage，可以登录多个账户了，页面一关存储的数值也会自动被清掉，不存在安全问题；但来了新的问题，登录后，父页面跳转打开的新页面，两个页面之间的值无法共享了。 后来想了一下，可以利用window.opener来解决，自己写...
vue项目打开俩个不同的详情页，数据同步的解决办法
m0_64512327的博客
10-21 607
提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。这就是为什么打开两个或多个详情页的时候，切换标签页数据不更新的原因。提示：deep深度监听/第一次初始化渲染必须设置为true。解决办法（可以使用监听器，去监听路由的变化）
1.0Vuex的三板斧，使用vuex管理不同页面数据
m0_56986233的博客
03-27 234
封装vuex模块，导入axios，拿值 import { getList, getBanner, getFloor } from '@/API/getDate.js' // 这是home模块 const state = { cateType: [],//这是三级联动的数据 } const mutations = { receiveCateType(state, cateType) { state.cateType = cateType }, } const actions = { /
Vue——多页面不共用token进行拦截
NanChen的博客
08-16 596
如果想实现一个效果，将token值清除后刷新页面回到登录页面并且可以跳转到注册页面。需要使用beforeEach来实现。这里需要添加一个用来放开token权限的变量，
Vue中关于token与后端不对应的问题
qq_32578275的博客
09-06 1846
Vue中token验证踩坑 最近在修改前人留下的代码，修改中无意发现当我向后端发送请求提取数据时，后端提示我有关token的错误。问题所在和解决方式在此记录一笔。 问题初步定位在我所修改的系统的登陆部分和向后台发送请求的api部分，在登陆时，后端返回给了前端一个token,前端将其储存在了sessionStorage中，以供请求拦截器使用 这里是login当中将token储存进sessionStorage:这里是请求拦截器中将请求头带上token： 当我退出登陆，紧接着再次登陆另一账号时，会出现后端所接收到
vuex在electron不同窗口共享的问题
weixin_52103939的博客
12-18 2702
问题描述：项目使用electron在窗口A中打开窗口B B中向vuex中写入数据,B中打印 vuex已经更改完成,但是A中还是没有变化。 因为不同的窗口，属于不同的渲染进程，vuex 是被隔离的，相互之间是不能通过 vuex 进行通信的，2个渲染进程之间进行通信，需要通过 主进程进行分发才行。可以用vuex-electron来实现。 1、安装Vuex Electron npm install vuex-electron import Vue from "vue" import Vuex from "vu
@vue/cli-plugin-vuex如何在页面引入vuex
05-21
@vue/cli-plugin-vuex是一个Vue CLI插件，用于在Vue项目中集成Vuex，从而实现状态管理。要在页面中引入Vuex，需要按照以下步骤进行操作： 1. 安装@vue/cli-plugin-vuex插件： ``` npm install -D @vue/cli-plugin-vuex ``` 2. 使用Vue CLI创建一个新的项目，选择安装@vue/cli-plugin-vuex插件： ``` vue create my-project ``` 3. 在Vue项目中创建store.js文件，用于定义Vuex的store： ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { getCount: state => state.count } }) ``` 4. 在main.js文件中引入store.js，并将store挂载到Vue实例上： ``` import Vue from 'vue' import App from './App.vue' import store from './store' new Vue({ store, render: h => h(App), }).$mount('#app') ``` 5. 在组件中使用Vuex的state、mutations、actions、getters等方法： ``` <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> export default { computed: { count () { return this.$store.getters.getCount } }, methods: { increment () { this.$store.dispatch('incrementAsync') } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值