this.$store进行数据存储

已于 2024-04-19 08:49:11 修改
阅读量273 收藏
点赞数 3
文章标签： 前端 vue.js
于 2024-04-17 11:27:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/judith_p/article/details/137865773
版权
本文讨论了在基于Vue应用中，如何利用Vuexstore存储登录接口返回的用户信息，以及在特定情况下不通过Vuex直接从接口获取数据并存储到localStorage的方法。
摘要由CSDN通过智能技术生成

背景条件：在登录时获取登录接口返回的登录人信息，存储到本地 然后再在需要的时候拿取校验

由于接口登录方式为dispatch 所以用了Vuex store存储数据  而进行vuex则需要在user.js中定义

而如有接口获取不需要通过vuex存储的就更简单了直接从接口拿去之后setItem

橘子味小白菜
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解Vue This$Store总结
10-17
主要介绍了详解Vue This$Store总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vuex中 this.$store.dispatch() 与 this.$store.commit()二者的区别
天涯芳草
04-26 2万+
this.$store.dispatch()与this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state this.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值) this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值) ......
vue中的全局变量 this.$store.state 的取值与赋值
coldriversnow的专栏
06-16 2万+
一、定义 全局变量 注：如果不在store目录下的 index.js 定义 则 在其它 ***.vue 页面 代码中赋值，其它页面的这个全局变量，是不会变化的。
Vuex中模块化后this.$store.commit和this.$store.state的用法
bob的博客
07-10 1万+
1.背景 大中型项目，需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。 再使用单个store方式会让项目代码冗余，不利于组件复用，模块化后对于一些相同的方法名this.$store.commit 怎样调用到相应的模块下，今天来实践一下。 2.将store模块化 2.1在src目录下创建store文件夹,再创建一个index.js作为所有模块的向外暴露的出口 2.2这个是tab2.js,具体的业务逻辑可以写在这里，最总要的是namespaced，模块化一定要命名空间，否则同样的
Vue学习笔记（七）
qq_27144571的博客
02-19 3470
Vuex 1.vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可能预测的方式发生变化；Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试，状态快照导入导出等高级调试功能。 2.理解状态管理模式、集中式存储管理：将状态看作变量，前面两个名词的作用就是把多个组件需要共享的变量全部存储到一个对象里面；然后将这个对象放在顶层的Vue实例中，让其他组件可以使用；这样多个
vuex 解决报错this.$store.commit is not a function的方法
10-17
当遇到 `this.$store.commit is not a function` 的错误，通常是因为在尝试调用 Vuex 中的 mutation 方法时，没有正确地配置或引用 store。 首先，我们需要确保正确安装了 Vuex。通过运行 `npm install vuex --save...
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
10-15
本文将重点介绍两个方面：一是如何在Vue项目中引用公共方法，二是如何通过Vuex中的this.$***mit进行状态管理。 ### Vue项目中引用公共方法 在Vue项目中，当我们开发多个组件，且这些组件需要使用相同的方法时，...
vuex中store存储store.commit和store.dispatch的用法
01-19
this.$store.commit(‘loginStatus’, 1); this.$store.dispatch(‘isLogin’, true); 规范的使用方式： // 以载荷形式 store.commit('increment'，{ amount: 10 //这是额外的参数 }) // 或者使用对象风格的提交...
this.$store.dispatch(“LoginByUsername“, this.loginForm)的用法解释
超级浣熊
01-13 8906
vue.js登录代码解释
vue,引入this.$store.state.user.info，获取用户信息
最新发布
m0_51326872的博客
10-14 3481
将this.$store.state.user.info赋值给headForm表单，并渲染到div里面。第一步：在store--index里面引入Vue,Vuex,最后。第二步：在user.js里面添加定义的state.info。用export default 封装代码，让外部可以引用。报错：this.$store.state拿不到值。就可以实现动态拿到姓名，部门，当前日期等信息。第四步：检查vue和vuex的版本。使用vuex管理状态遇到的问题。具体的index页面上。
Vue使用Vuex一步步封装并使用store
GeniusXYT的博客
05-12 9208
文章目录一、安装Vuex依赖二、一步步封装store1. main.js中全局引入store仓库（下一步创建）2. this.$store3. this.$store.state4. this.\$store.getters（this.\$store.state的升级）5. this.$store.commit('mutations')6. this.\$store.dispatch('actions')（this.\$store.commit('mutations')的升级）三、modules 模块化四、
vuex报错 this.$store显示undefined
weixin_45041493的博客
06-14 2508
vue项目中使用vuex 报错 tihis.$store报错undefined，如何解决
vuex中的store和$store的区别
在希
04-30 1万+
这里写自定义目录标题 <router-link to="/login">{{ $store.state.userName }}</router-link> <router-link to="/login">{{ store.state.userName }}</router-link> <router-link to="/...
已解决 TypeError: this.$store.commit is not a function (Vue)
从前端设计到后端实现，从云技术到人工智能，这里分享最新的技术见解和实践经验。一起学习，一起进步！
09-17 1106
嗨，大家好，我是猫头虎博主！今天我要和大家分享一些关于Vue前端开发中遇到的一个令人头疼的Bug：TypeError: this.$store.commit is not a function。在这篇博客中，我将详细解释这个Bug的原因，提供解决方法，并分享如何避免它。让我们一起深入探讨吧！😺在Vue.js前端开发中，出现TypeError: this.storecommitisnotafunction错误可能会令人烦恼。然而，通过正确配置Vuex。
深入理解 Vuex 中的this.$store.dispatch方法
热门推荐
你若盛开，清风自来
04-24 9万+
🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6🍨🕠 牛客高级专题作者、在牛客打造高质量专栏🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程。
Vuex（ Vuex 是什么，State 的基本使用，Mutation 的基本使用，Action 的基本使用，Getter 的基本使用，Module 基本使用）
qq_45585640的博客
02-18 409
Vuex（ Vuex 是什么，State 的基本使用，Mutation 的基本使用，Action 的基本使用，Getter 的基本使用，Module 基本使用）
vuex中的this.$store.commit和dispatch()使用
coinisi_li的博客
09-09 6871
在vue的项目里常常会遇到父子组件间需要进行数据传递的情况，我们可以用熟悉的props 或者 $emit 等方式进行父子组件通信，但是，在项目稍微大一点的情况中，面对众多的不相关的平行组件，并且很多数据需要多个组件循环使用，这个时候在这些组件间传递数据，使用上述方法会比较麻烦，项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 为了解决这一问题，我们需要使用Vue 的状态管理工具Vuex
Vuex 基础
weixin_53500514的博客
04-01 4176
文章目录 目录 文章目录 前言 一、Vuex是什么？ 二、初始化 三、Vuex组成 （一） state 1.定义 2. 原始调用 3.辅助函数 - mapState (二)mutations 1.定义 2.原始调用 3.辅助函数 - mapMutations （三）actions 1.定义 2.原始调用 3.辅助函数 -mapActions （四）getters 1.定义 2.原始调用 ...
Vuex基础【一】
小管管的博客
07-08 3265
​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用存储管理应用的所有组件的状态，并以相应的规则保证状态以一种的方式发生变化。结论 初始化： vuex基础-state state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中 如何在组件中获取count? 1.原始形式- 插值表达式 组件中可以使用 this.$store 获取到vuex中的，可通过state属性属性获取count， 如下 2.计算属性- 将state属性定义在计算属性中
怎么往this.$store.state存数据
06-10
在Vuex中，要往`this.$store.state`存储数据，需要通过`mutations`或者`actions`来进行状态管理。 一般来说，`mutations`用于同步修改`state`中的数据，而`actions`则用于异步修改数据。 以下是一个示例，假设我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值