Vue中状态管理——Vuex
vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。
在vuex出现之前,vue里面的状态是属于‘单向数据流’。举个官网的例子:
new Vue({// statedata () {return {count: 0}},// viewtemplate: `<div>{{ count }} </div`,// actionsmethods: {increment () {this.count++}}
})
其中
- state是一个数据源
- view以声明的方式将state映射到视图
- actions 响应在view上的用户输入导致的状态变化
但是解决不了 多个组件共享状态
所以vuex应运而生
简单来说,就是共享的状态用state来存放,用mutations来操作state,但是需要用store.commit来主动式的操作mutations。
下面来单独介绍 state,getters,mutations,actions,modules
State
单一状态树
vuex使用单一状态树,那么就可以用一个对象来包含全部的应用层级状态。所以state就作为数据源。
如何在组件中获得vuex状态?
由于vuex的状态存储是响应式的,所以从store实例中读取状态的最简单方法就是使用计算属性来返回某个状态:
这个是store/state.js中声明的数据源
这个是在组件中进行的引用
不过需要注意的是,在组件中进行引用之前,需要先在入门文件中进行注入
即:
如果不在根实例中注册store选项的话,那么需要在每一个使用state的组件中都要导入。
注册之后,子组件只需要this.$store即可调用vuex。
Getters
有时候我们需要从state中派生出一些状态,比如筛选一组列表,并且这个筛选后的数据是有其他组件要用的。那么我们就需要把这个结果进行包装,形成共享状态。
例如:
computed:{doneTodosCount () {return this.$store.state.todos.filter(todo => todo.done).length}
}
如果说这个length是其他组件用的话,那么如何做呢?
Getter就这样应运而生了。
getters: {doneTodosCount: state => {return state.todos.filter(todo => todo.done).length}
}
Getter 会暴露为store.getters对象
所以很容易在任何组件中使用它:
computed: {doneTodosCount () {return this.$store.getters.doneTodosCount}
}
这是getters.js
这是组件中的引用
Mutations
更改Vuex的store中的状态的唯一方法就是提交mutations。
Vuex中的mutations就像一个事件:每个mutations都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数接受state作为第一个参数。
但是我们又不能直接来调用一个mutations的handler。要唤醒一个mutations handler,需要以相应的type来调用store.commit方法。
这个是在mutations.js中注册的一些的事件
这是在组件中来触发这个事件
当然,我们注意到,mutations中可以传递额外的参数,这个参数就叫做mutations的载荷。
在更多的情况下,载荷应该是一个对象。这样可以包含更多的字段。
但是mutations必须是同步函数。
那我们如何来异步的更新State呢?
答案是: Actions
Actions
Actions类似于 mutations 不同的是:
- Actions 提交的是mutations,而不是直接变更状态。
- Actions 可以包含任意异步操作。
这也就形成了 actions —— mutations —— state 的过程
Actions函数接受一个与store实例具有相同方法和属性的context对象,因此可以通过context.commit来提交一个mutations。但是如何触发呢?
答案: store.dispatch
Modules
使用单一状态树,导致应用的所有状态都集中到了一个很大的对象。所以,store对象容易变得臃肿。
为了解决这个问题, Vuex允许咱们把store进行一个功能拆分,分割成不同的模块(module)。每个模块都拥有自己的store,mutations,action,getters。
项目结构
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store├── index.js # 我们组装模块并导出 store 的地方├── actions.js # 根级别的 action├── mutations.js # 根级别的 mutation└── modules├── cart.js # 购物车模块└── products.js # 产品模块
总结:
vuex可以用在单页面上的组件间共享状态。不适合用于跨页面的通信。
另外,对于一些跨页面的数据或者关键性的数据,可以通过localStorage,sessionStorage
Vue中状态管理——Vuex相关推荐
- Vue状态管理vuex
转: https://www.cnblogs.com/xiaohuochai/p/7554127.html 前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为 ...
- Vue新一代状态管理工具—Pinia—都2023年了,快学起来吧!
Pinia 基本介绍 Pinia 是 Vue.js 的轻量级状态管理库 官方网站:https://pinia.vuejs.org/ 中文文档: https://pinia.web3doc.top/in ...
- [vuex]状态管理vuex
vuex 状态管理vuex,之前一般都是通过一个全局js文件实现全局设置,在vue中通过vuex进行管理 简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的 ...
- Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么
Pinia从了解到实际运用--彻底搞懂什么是Pinia 知识回调(不懂就看这儿!) 场景复现 什么是pinia pinia相比vuex的优势 为什么要使用pinia? 基本示例 知识回调(不懂就看这儿 ...
- 状态管理vuex的规范化使用~~总结
一.定义 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 二.安装 cnpm i vuex - ...
- 在vue中 storge 和vuex使用的用法区别
在vue中 storge 和vuex使用的用法区别 1.联动性:storge对于属性的改变不能触发其他页面的改动 storage: 存取login之后就不会改变的信息,比如userId, isAdmi ...
- Vue中路由管理器Vue Router使用介绍(三)
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 {path:'/user/:id/:name', ...
- vue总结 08状态管理vuex
状态管理 类 Flux 状态管理的官方实现 由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管理库 ...
- 理解vuex -- vue的状态管理模式
2019独角兽企业重金招聘Python工程师标准>>> vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管 ...
最新文章
- .pgr照片文件解析,C++与Java存储数据差别大小端模式
- linux中why软件,why?why?why?
- 【python练习】支付宝自动偷取能量
- Python练习:期末测评
- windows下用XShell远程ubuntu时连接失败
- iCloud 是什么
- android仿微信图片编辑器,electron/vue可编辑框contenteditable|仿微信截图
- 通信原理及系统系列11—— 设计无码间串扰的通信系统(升余弦滚降滤波器)
- 在html中加入中文字体,html中中文字体的代码
- 华南植物园除夕牡丹花展 近万盆鲜花将亮相
- 亲测,超实用Zbrush笔刷大合集,腾讯金牌建模师同款
- 终于还是对闲鱼下手了。闲鱼爬虫,idlefish spider来了
- 去掉字符串中的所有空格
- 【Unity连载】斗兽棋-棋类游戏开发演示(2)
- 浏览器选择 html,select的最佳预设打造全兼容各浏览器select
- Android Adb命令(4) - ps 查看进程信息
- java实现.费诺编码_使用递归算法编写的费诺编码
- 【论文阅读】MLGCL:Multi-Level Graph Contrastive Learning
- pyqt5在表格中添加单选框(勾选框)
- Web3 开发者必备手册:盘点 5 种最佳区块链编程语言