【Vue】Vuex-store
Vuex是什么？
Vuex是实现组件全局状态(数据）管理的一种机制，可以方便的实现组件之间数据的共享。
像一个仓库一样！
使用Vuex统一管理状态的好处？
1.能够在vuex中集中管理共享的数据，易于开发和后期维护
2.能够高效地实现组件之间的数据共享，提高开发效率
3.存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步
（一般情况下，只有组件之间共享的数据，才有必要存储到vuex中;对于组件中的私有数据，依旧存储在组件自身的data中即可。）
核心概念概述
vuex中的主要核心概念如下:
- State
- Mutation
- Action
- Getter
State
State提供唯一的公共数据源，所有共享的数据都要统一放到Store的 State中进行存储。
组件访问State中数据
法一：通过 $store.state.全局数据名称 获取。
法二：按需导入
对比两种方式：
对于Vuex，不允许直接修改store内的数据。
这就要学到Mutation了
Mutation
Mutation用于变更Store中的数据。
- 只能通过 mutation变更Store数据，不可以直接操作Store中的数据。
- 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化
- 定义和触发：
（Mutations里面的方法的第一个参数永远是state，可以直接从里面更改数据）
触发mutations时也可以传递参数：
commit的作用就算调用某个mutation函数
触发mutations同样有第二种方式，就是按需索取，和按需索取store中变量方法非常类似，把需要用到的方法映射过来即可。
声明之后，直接 this.调过来的方法名字 即可，相当于将该函数定义为了组件中自己的函数。
在mutations中不可以执行异步操作，如setTimeout(()=>{},).
处理异步任务又要学到Action了
Action
Action用于处理异步任务。
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。
（action里面的方法的第一个参数永远是context，可以直接从里面更改数据）
dispatch是触发action中的方法，commit是触发mutations中的。
注意：action只负责执行异步操作，如果像修改数据，还是得通过context.commit触发某个mutation才行.
同样，触发action时也可以传递参数：
触发action同样有第二种方式，就是按需索取，和前两者也是一样的，把需要用到的方法映射过来即可。用的是mapActions
那么，有时候我们并不想改变store里的数据，只想使用怎么办呢？
这个时候就要学Getter了
Getter
Getter 用于对 Store 中的数据进行加工处理形成新的数据。
- Getter 可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
- Store中数据发生变化，Getter的数据也会跟着变化。
也是有两种方式，懒得讲了，前面几个懂了这个就自然一下就明白了
【Vue】Vuex-store相关推荐
- 【Vue】Vuex来改写MyClassroom.vue，点击【Vuex-保存】保存教室数据-20221226
Vuex来改写MyClassroom.vue,点击[Vuex-保存]保存教室数据 坑1:template中调用方法不用带this <button @click="saveClassro ...
- 【vue】vuex中modules的基本用法
1,什么时候用modules 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 stor ...
- 【Vue】vuex mapState和mapGetters
1.mapState方法:用于帮助映射state中的数据为计算属性 computed: {// 借助mapState生成计算属性:sum.school.subject(对象写法一)...mapStat ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
[vue]使用localStorage解决vuex在页面刷新后数据被清除的问题 参考文章: (1)[vue]使用localStorage解决vuex在页面刷新后数据被清除的问题 (2)https:// ...
- 【Vue】Vue 项目搭建
文章目录 一.NodeJs 下载及配置 二.全局下载项目脚手架 三.创建项目 四.启动项目 一.NodeJs 下载及配置 本节内容参见本人博客:[Vue]Nodejs下载与安装 测试安装版本: 返回顶 ...
- stylus vue 报错_【Vue】Re01 理论概念和入门上手
一.Vue概述 什么是渐进式?1.把Vue作应用的一部分嵌套项目中2.如果完全抛弃其他组件和框架,Vue又具有丰富的生态和库莱支持3.Core + Router + VueX 满足项目绝大多数的需求- ...
- 【vue】— provide/inject的原理
系列文章目录 [VUE]- diff算法原理 [VUE]- watch侦听器原理 文章目录 系列文章目录 一.provide/inject的作用及使用方式 二.顺道复习一下组件间的通讯方式吧 三.源码 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
- 【Vue】样式穿透 ::v-deep的具体使用
[Vue]样式穿透 ::v-deep的具体使用 之前在项目中用到了 vant,使用特别简单,而且组建也非常的丰富.即时这样,在项目中肯定也需要用额外的样式来打造自己的应用. 直接在 中编写的话只会影响 ...
- 【Vue】npm run serve 和 npm run dev 有什么区别
[Vue]npm run serve 和 npm run dev 有什么区别 Q: 我的粉丝私信我,项目中运行的npm run serve 和 npm run dev 有什么区别?什么时候用npm r ...
最新文章
- 自回归解码加速64倍，谷歌提出图像合成新模型MaskGIT
- 揭秘高盛区块链报告：区块链技术在五大领域从理论走向实践 | 附报告下载
- BCH DEVCON 黑客马拉松即将登陆旧金山！
- BASH SHELL 脚本基础
- python for in list
- 蔻驰和mk哪个更大牌_mk和coach哪个好？mk和coach包包是一个档次吗？
- python中定义数据结构_Python中的数据结构—简介
- 数组的方法之(Array.prototype.reduce() 方法)
- （HDU）1157 -- Who's in the Middle（哪个居中）
- Opencv学习笔记_计算机视觉是什么？Opencv的起源
- leetcode 贪心_「leetcode」135.分发糖果【贪心算法】详细图解
- 决策树和CART决策树
- 天猫达尔文商品管理体系通俗简介
- 双向链表(double linked list)
- python --通过urlretrieve下载MP4文件
- Redis的Mster/Slaver
- 关于未名湖边的烦恼问题
- ecshop简化虚拟商品购买收货人信息【ECSHOP购物车不存在实体商品电话改为非必须以及隐藏掉】
- 男人选择什么样的人做老婆？
- 拥有着12万亿市场的部件，主角：射频