this.$store进行数据存储

原创已于 2024-04-19 08:49:11 修改 · 432 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

于 2024-04-17 11:27:39 首次发布

本文讨论了在基于Vue应用中，如何利用Vuexstore存储登录接口返回的用户信息，以及在特定情况下不通过Vuex直接从接口获取数据并存储到localStorage的方法。

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

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

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

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

橘子味小白菜

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别

qq_37916164的博客

10-08

1820

1：Vuex是什么？所谓的Vuex其实是一个为Vue.js设计的数据仓库，把各个组件公用的数据放到一个仓库里面进行统一的管理 Vuex优点：既使非父子组件间的数据共享也能变得简单明了让程序变得更加可维护（将数据抽离了出来）只要仓库里面的数据发生了变化，在其他组件里面数据被引用的地方也会自动更新 Vuex怎么用？先用vue-cli安装项目框架 @vue/cli用法 Yarn yarn global add @vue/cli npm npm install -g @vue/c

分析vwex数据传输路径及this.$store未定义问题的解决方案

最新发布

10-23

false Vue.use(ElementUI) const app = new Vue({ router, store, // 注册Vuex存储实例 render: h => h(App) }) $mount(#app) ``` 通过这种方式，每个组件都可以直接使用`this.$store`来访问状态。第二种方式：局部...

参与评论您还未登录，请先登录后发表或查看评论

详解Vue This$Store总结

10-17

主要介绍了详解Vue This$Store总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Vue学习笔记（七）

qq_27144571的博客

02-19

3829

Vuex 1.vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可能预测的方式发生变化；Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试，状态快照导入导出等高级调试功能。 2.理解状态管理模式、集中式存储管理：将状态看作变量，前面两个名词的作用就是把多个组件需要共享的变量全部存储到一个对象里面；然后将这个对象放在顶层的Vue实例中，让其他组件可以使用；这样多个

vue,引入this.$store.state.user.info，获取用户信息

m0_51326872的博客

10-14

4776

将this.$store.state.user.info赋值给headForm表单，并渲染到div里面。第一步：在store--index里面引入Vue,Vuex,最后。第二步：在user.js里面添加定义的state.info。用export default 封装代码，让外部可以引用。报错：this.$store.state拿不到值。就可以实现动态拿到姓名，部门，当前日期等信息。第四步：检查vue和vuex的版本。使用vuex管理状态遇到的问题。具体的index页面上。

vuex中的store存储数据

weixin_43844730的博客

03-20

1273

在 src 目录下新建 store 文件夹，在 store 文件夹内新建一个deviceProps.js文件。使用commit()可将deviceProps数据传递给addData。在vue项目main.js中挂载。4、页面中提交数据给state。3、在组件中获取state。

Vuex在store中存储读取数据

qwq2867309085qwq的博客

11-01

2158

a页面存储 b页面读取。

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项目中，当我们开发多个组件，且这些组件需要使用相同的方法时，...

vue——store全局存储

07-11

2406

业务场景：刷新页面时，首次拉取所有配置，存储到store状态管理用于全局调用； import Vue from 'vue' import Vuex from 'vuex' import userInfo from './modules/user' Vue.use(Vuex) export default new Vuex.Store({ modules: { ...

Vue中使用Vuex的store存储数据

u012587407的博客

03-05

2万+

Vuex中的 State 1、State提供唯一的公共数据源，所有的共享的数据都要统一放在Store中的State中进行存储 const store = new Vuex.Store({ state:{ count:0 } }) 2、组件访问State中数据：第一种方式this.$store.state.全局数据名称 <template> <div c...

Vue中的this.$store.state.xx.xx

鲨鱼辣椒灬的博客

05-29

4万+

this.$store.state.xx.xx 其实是Vue用到状态管理工具Vuex Vuex官网：https://vuex.vuejs.org/zh/ 感觉就是把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！（在项目的任意地方都可以随时获取和动态的修改，在修改之后，vue会为你的整个项目做...

vuex使用/this.$store/分模块的vuex

m0_45000011的博客

07-16

325

简化写法。

vuex用户信息的存取

PaPablame的博客

01-28

6694

一般来说我们的用户信息都存在vuex里面，但是页面每次刷新都会把vuex里面的数据清空，这样我们页面上的头像，用户信息就没有了，所以我们还需要把用户信息存一份在本地。在登录的时候把数据存本地和存vuex 本地存储：setUser(JSON.stringify(res.data)) vuex存储：this.$store.commit("SET_USER", res.data); "SET_USER"是vuex里面修改user的方法，res.data是你要存的数据。把vuex里面的数据和本地数据整合

vuex--this.$store.dispatch

热门推荐

想去旅行的静静的博客

03-30

5万+

这是vue-element-admin的simple例子。下面是登录vue的代码。问题： 1、登录之后做了什么？ 2、this.store.dispatch是什么意思？3、this.store.dispatch是什么意思？ 3、this.store.dispatch是什么意思？3、this.router.push又是什么意思？ ...

VueThis$Store总结

weixin_33979363的博客

12-15

630

开发 VueThis$Store 一些技巧上次答应一个掘金的读者介绍下开发此插件的一些原理和技巧，在此也一并做下总结了。基本工具 1 正则表达式，正则表达式大家都不陌生，正则表达式的优点就是速度快，对于一个代码补全的插件，用户肯定希望更快的得到反馈，测试了 1000 行的vue文件匹配全部的mapXXX()之类的 api 字符串也只是用了 1ms 都不到的时间，但是缺点也非常明显，他是上下文无...

this.$store undefined

u013994400的博客

01-30

1017

3、如果上边均没问题，打开package.json，查看vue与vuex的版本，vue2对应vuex3,vue3对应vuex4。报错：vuex报错 this.$store显示undefined，可能存在的问题，从以下几个方向排查。1、查看store文件中的vuex实例对象是否暴漏。2、main.js中是否注入store。安装指定版本，重启就好了。

vuex如何存储数据、获取数据、以及数据的持久化

m0_65069237的博客

12-09

7420

第一步，在vuex中matations模块中加入存储数据的方法第二步，在需要提交数据的页面使用this.$store.dispatch方法通过点击事件submitForm即可将数据传入vuex中。点击跳转到About页面。

this.$store.dispatch(“LoginByUsername“, this.loginForm)的用法解释

超级浣熊

01-13

9234

vue.js登录代码解释

h5如何使用this.$store存取数据

06-18

以下是一个完整的示例，展示如何在 H5 环境中使用 `this.$store` 进行数据的存取： #### 1. 安装 Vuex 首先需要安装 Vuex： ```bash npm install vuex --save ``` #### 2. 创建 Vuex Store 创建一个名为 `store.js...