this.$store进行数据存储

已于 2024-04-19 08:49:11 修改
阅读量206 收藏
点赞数 3
文章标签： 前端 vue.js
于 2024-04-17 11:27:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Judith_p/article/details/137865773
版权

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

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

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

橘子味小白菜
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 利用vuex存入数据和取出数据的方法
宁夏前端工程师，马卫斌，wx：1457508895
10-30 2839
在Vue中，你可以使用Vue的状态管理模式（Vuex）来存储和获取数据。Vuex提供了一个全局的存储库，允许你在应用程序的任何组件中访问和修改数据。方法用于存储数据，接受一个payload参数，其中包含要存储的数据。然后，在你的Vue项目中创建一个store文件夹，并创建一个名为。接下来，你可以在组件中使用这些方法来存储和删除数据。（或者其他你喜欢的名字）的文件。
vuex如何存储数据、获取数据、以及数据的持久化
最新发布
m0_65069237的博客
12-09 3783
第一步，在vuex中matations模块中加入存储数据的方法第二步，在需要提交数据的页面使用this.$store.dispatch方法通过点击事件submitForm即可将数据传入vuex中。点击跳转到About页面。
Vuex在store中存储读取数据
qwq2867309085qwq的博客
11-01 1923
a页面存储 b页面读取。
Vuex之 使用store缓存数据
qq_39835505的博客
01-18 2975
参考 https://blog.csdn.net/ProgramarQin/article/details/80357910 https://blog.csdn.net/weixin_44582045/article/details/121852631 this.$store.commit('方法名',值)【存储】 this.$store.state.方法名【取值】 我使用的是 vue-element-admin 1 src/store/index.js 写方法 import Vue from 'vu
Vue2 中vuex和store基本用法——取值之this.$store.getters.getValue & 存值之this.$store.commit(‘setValue‘, paramVal)
weixin_44867717的博客
04-12 1万+
Vue2 中vuex和store基本用法——取值之this.KaTeX parse error: Expected 'EOF', got '&' at position 24: …tters.getValue &̲ 存值之this.store.commit(‘setValue’, paramVal) 1、应用场景 在不同路由中使用同一个会改编的参数，也就是需要一个全局参数。即声明一个最简单的store后，怎么存入全局变量，怎么获取全局变量。 2、操作步骤 2.1、声明一个store的inde
vuex中store存储store.commit和store.dispatch的用法
01-19
this.$store.commit(‘loginStatus’, 1); this.$store.dispatch(‘isLogin’, true); 规范的使用方式： // 以载荷形式 store.commit('increment'，{ amount: 10 //这是额外的参数 }) // 或者使用对象风格的提交...
解决$store.getters调用不执行的问题
12-13
在登录时将登录得到的用户信息存储在vuex的state和sessionStorage中。使用时在state中获取，当因为刷新等原因导致state中没有数据时，去sissionStorage中获取。 错误： 登录后，需要获取用户信息时，getters中属性的...
关于vue3.0中的this.$router.replace({ path: ‘/’})刷新无效果问题
11-21
首先在store中定义所需要的变量可以进行初始化，再定义一个方法，登录成功后A页面，跳转到B页面之前，需要直接调用store中存储数据的方法，全局可以使用 诸如以上所示，该问题，百度了好久，多亏群里大佬。 vue...
Vue退出登录时清空缓存的实现
12-30
如下所示： <router></router> [removed] export default { data () { return { theme: this.$store.state.app.themeColor }; }, mounted () { }, beforeDestroy () { }, methods: {
Vuex中实现数据状态查询与更改
12-13
在vuex进行vue注入后即可在任一子组件中通过this.$store来访问vuex import store from './store' new Vue({ el: '#app', router, store, components: { App }, template: '<App>' }) 1.在子组件中通过this.$...
Vuex数据的存储与获取
weixin_49281747的博客
03-09 7026
因为最近需要对原有项目进行改造，之前没有认真研究过vuex的使用，今天把学习官方文档的过程记录下来以供日后查阅，同时也希望能够为其他开发人员提供参考。 vuex的核心点是store，store本质上是一个仓库，它可以存储大部分的state。而这种存储是响应式的，如果state发生变化，那么对应的组件也会响应更新。如果想要改变state，那么需要通过commit mutation。 以下示例引用自官网（开始 | Vuex）： // 创建一个新的 store 实例 const store = creat
在vue项目中如何利用vuex进行数据存储？
qq_45934004的博客
07-29 4481
使用vuex存取数据，状态，如何简单学会vuex？
vuex存取数据（超详细）props传值
weixin_58431406的博客
06-22 8033
vuex主要是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会显得得心应手... 补充：props传值
vue:状态管理(vuex)，对state数据的四种存和四种取的方法
成长的嘻嘻哥
03-29 2985
vue核心组件之vuex状态管理，主要是解决vue路由中组件传值的复杂性，和储存像token，个人信息等公共组件数据
store——数据存储
qq_52301431的博客
01-29 880
此页面就是对数据的增加和删除改变进行封装。
vuex中this.$store.commit和this.$store.dispatch的用法
热门推荐
老电影故事的博客
12-10 3万+
前言 this.store.dispatch()与this.store.dispatch() 与 this.store.dispatch()与this.store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state 区别 this.$store.commit() 同步操作 this.$store.commit('方法名',值)【存储】 this.$store.state.方法名【取值】 this.$store.dispatch()
vuex中store存储store.commit和store.dispatch的区别及用法
qq_33043025的博客
05-04 7037
参考：​​​​vuex中store存储store.commit和store.dispatch的区别及用法 - Amerys - 博客园参考：​​​​ 代码演示： 　　首先，我们假设state有以下数据 //类似组件data, 定义组件公共数据 state: { book: 'jQuery', }, 　　然后我们要在组价中修改book, 现在mutations中定义修改的方法 //类似组件methods, 定义修改state的方法 mutations: .
Vue中使用Vuex的store存储数据
u012587407的博客
03-05 1万+
Vuex中的 State 1、State提供唯一的公共数据源，所有的共享的数据都要统一放在Store中的State中进行存储 const store = new Vuex.Store({ state:{ count:0 } }) 2、组件访问State中数据： 第一种方式this.$store.state.全局数据名称 <template> <div c...
this.$store
09-05
引用提到了在Vue3 TypeScript中使用this.$store会报错。这是因为在Vue3中，Vuex的类型定义发生了一些改变，this.$store不再被认为是一个有效的属性。因此，直接使用this.$store会导致Property '$store' does not exist on type的错误。 引用介绍了this.$store.commit()和this.$store.dispatch()方法的区别。两个方法都是用来传递值给Vuex的mutation来改变state。this.$store.commit()是同步操作，通过this.$store.commit('方法名', 值)来存储值，然后通过this.$store.state.方法名来获取值。而this.$store.dispatch()是异步操作，通过this.$store.dispatch('方法名', 值)来存储值，然后通过this.$store.getters.方法名来获取值。 引用提到了解决报错this.$store.commit is not a function的方法。这可能是因为在代码中没有正确导入Vuex或者没有正确配置Vuex的store。可以参考该引用的方法来解决这个问题。 综上所述，this.$store在Vue3 TypeScript中不再被视为有效的属性。可以使用this.$store.commit()和this.$store.dispatch()来实现对Vuex的mutation和action的调用，具体取值方式也有所不同。如果遇到报错this.$store.commit is not a function，可以参考引用中的方法来解决。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3+ts中使用this.$store报错Property ‘$store‘ does not exist on type](https://blog.csdn.net/qq_31755699/article/details/124213551)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vuex中this.$store.commit和this.$store.dispatch的用法](https://blog.csdn.net/weixin_44582045/article/details/121852631)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vuex 解决报错this.$store.commit is not a function的方法](https://download.csdn.net/download/weixin_38743119/12948476)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值