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

最新推荐文章于 2024-06-05 00:45:00 发布
最新推荐文章于 2024-06-05 00:45:00 发布
阅读量4.5w 收藏 62
点赞数 18
分类专栏： Vue 文章标签： 困扰过的烦恼
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ll594317566/article/details/90666836
版权

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

获取store中的数据
在这里插入图片描述
在这里插入图片描述

在vue根文件中注册store，这样所有的组件都可以使用store中的数据了

我的项目文件结构：
在这里插入图片描述

在main.js文件中注册store
在这里插入图片描述
在这里插入图片描述

然后代码中写到
在这里插入图片描述
登录后前端有缓存userId，然后通过userId再去查找

这个位子就用到了 公共页面里面的
在这里插入图片描述
在这里插入图片描述

总结：main.js是工会老大，你把奖励给了老大，老大有的道具会交给你使用，那么你就可以通过this来使用，不知道我这样总结的对不对，如果不对，欢迎一起探讨

作者：鲨鱼辣椒灬
来源：CSDN

鲨鱼辣椒灬
关注
  • 18
    点赞
  • 踩
  • 62
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vuex的原理
Mrzhouzh的博客
02-22 385
前言 vuex作为vue官方出品的状态管理框架，以及其简单API设计、便捷的开发工具支持，在中大型的vue项目中得到很好的应用 理解computed 使用vuex中store中的数据，基本上离不开vue中一个常用的属性computed。官方一个最简单的例子如下 var vm = new Vue({ el: ‘#example’, data: { message: ‘Hello’ }, computed: { // 计算属性的 getter reversedMessage: function () { //
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中store.state、$store.state和this.$store.state的适用场景
最新发布
大剑师兰特的GIS世界
06-05 1127
通常情况下，在组件内部，推荐使用 `this.$store.state`，而在非组件的上下文中（如 Vuex 的模块定义、actions、mutations 或 getters）使用 `store.state` 更为合适。
Vue学习笔记（七）
qq_27144571的博客
02-19 3433
Vuex 1.vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可能预测的方式发生变化；Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试，状态快照导入导出等高级调试功能。 2.理解状态管理模式、集中式存储管理：将状态看作变量，前面两个名词的作用就是把多个组件需要共享的变量全部存储到一个对象里面；然后将这个对象放在顶层的Vue实例中，让其他组件可以使用；这样多个
使用Store实现登录数据的更新
Seeker_314的博客
02-10 1343
a1.使用 vue-cli 搭建项目 npm install cnpm -g --registry=https://registry.npm.taobao.org 2.安装 vue-cli ，在命令提示窗口执行： cnpm install -g vue-cli 3.用vue-cli来构建项目mystore.如图执行下一步。 4.新建store目录 以及文件 index.js ,如图 5. 在main.js中引入impor store from '...' import...
Vuex的基础使用
weixin_62407339的博客
03-01 238
Vuex的基础使用
vue.js三十九—— 初识vuex
武汉小喽啰
09-08 282
1. 介绍 参考链接：https://vuex.vuejs.org/zh/guide/ 1.1 官方介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。说直白点，vuex就是管理vue的状态(数据)的。 1.2 作用 Vuex 是vue配套的公共数据管理工具，它可以把一些共享的数...
vue中 this.$set的用法详解
10-16
在Vue.js框架中，`this.$set` 是一个关键的方法，用于处理响应式数据更新的问题。在某些情况下，当你尝试直接修改对象的属性或数组的元素时，Vue可能无法检测到这些变化，进而不会自动更新视图。`this.$set` 方法...
在Vue中使用this.$store或者是$route一直报错的解决
10-16
今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中的this.$options.data()和this.$data用法说明
10-15
在Vue.js框架中，`this.$options` 和 `this.$data` 是两个非常重要的属性，它们分别用于获取组件的配置选项和当前实例的数据对象。在开发过程中，正确理解和使用这两个属性对于管理组件的状态至关重要。 首先，`...
vuex 解决报错this.$store.commit is not a function的方法
10-17
return this.$store.state.bankInf.bankName; } } } ``` 如果需要修改 store 中的状态，应使用 mutation。在组件中触发 mutation： ```javascript export default { computed: { bankName() { return this.$...
详解Vue This$Store总结
10-17
主要介绍了详解Vue This$Store总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中this.$nextTick的作用及用法
11-21
这一机制的实现涉及到多个关键概念，包括`this.$nextTick`，它在Vue的异步更新队列中扮演着重要角色。 首先，Vue在初始化组件时，会对`data`对象中的所有属性通过`Object.defineProperty`进行拦截，将其转换为...
Vuex基础【一】
小管管的博客
07-08 2859
​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用存储管理应用的所有组件的状态，并以相应的规则保证状态以一种的方式发生变化。结论 初始化： vuex基础-state state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中 如何在组件中获取count? 1.原始形式- 插值表达式 组件中可以使用 this.$store 获取到vuex中的，可通过state属性属性获取count， 如下 2.计算属性- 将state属性定义在计算属性中
vuex--this.$store.dispatch
热门推荐
想去旅行的静静的博客
03-30 4万+
这是vue-element-admin的simple例子。 下面是登录vue的代码。 问题： 1、登录之后做了什么？ 2、this.store.dispatch是什么意思？3、this.store.dispatch是什么意思？ 3、this.store.dispatch是什么意思？3、this.router.push又是什么意思？ ...
vuex中 this.$store.dispatch() 与 this.$store.commit() 的区别
qq_37916164的博客
06-28 844
this.$store.dispatch() 与 this.$store.commit()方法总体来说只是存取方式的不同,两个方法都是传值给vuex的mutation改变state this.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值) this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值) commit: 同步操作 存
vue项目都在什么时候用store.state、$store.state和this.$store.state
sendudu的博客
08-13 1万+
store 和 [this.]$store 单来说，如果你在根组件下注入了store那么所有的.vue文件里使用就可以直接用 this.$store.xxxx Vue官网：为了在 Vue 组件中访问 this.$store.property，你需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制 //main.js import store from './store' new Vue({ el: '#a
vuex的commit
代码青春
09-27 2万+
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) store 中的状态的唯一方法是提交 mutation store.c..
Vue 之 Vuex 详细讲解
Java技术大杂烩博客
05-05 508
本文首发于个人公众号： Java技术大杂烩 ，欢迎关注查看更多原创技术文章 前言 在上篇文章 从零搭建 Vue 开发环境 中，学习了 Vue 的语法，如何使用 Vue 进行开发，学会了如何搭建开发环境，打包部署等；文章中也介绍了兄弟组件之间传值是通过 Vuex 来实现的，只不过是进行了简单的应用，今天就来详细的深入学习如何使用 Vuex 来进行状态管理。 简介 Vuex 是专门为 Vue.j...
vue 中 this.$store
01-31
在Vue中，this.$store是用来访问Vuex状态管理库的对象。通过this.$store可以获取和修改全局的状态数据。下面是一个示例： ```javascript // 在Vue组件中使用this.$store export default { computed: { count() { return this.$store.state.count; } }, methods: { increment() { this.$store.commit('increment'); }, decrement() { this.$store.commit('decrement'); } } } ``` 在上面的示例中，this.$store.state.count表示获取Vuex中的count状态值，this.$store.commit('increment')表示调用Vuex中的increment mutation来修改count的值。 需要注意的是，使用this.$store之前，需要先在Vue实例中注入Vuex插件。具体的步骤可以参考Vue官方文档中的Vuex部分。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值