Vuex听说很难?
Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可预测的方式发生变化。
看完这段专业的解释,我反正是一脸懵逼,内心毫无波澜,甚至有点想吃酱肘子。感觉和没说一样嘛!keep going。
什么是"状态管理模式"?
一个简单Vue计数器应用
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
这个状态自管理应用包含以下几个部分:
- state,驱动应用的数据源;
- view,以声明方式将 state 映射到视图;
- actions,响应在 view 上的用户输入导致的状态变化。
这是一种“单向数据流”的理念。
然后说明一下这种理念的缺点,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
这里说的是,vue 组件之间的传值操作,组件不多的情况下,嵌套的父子组件(prop,emit,on)和兄弟组件(global event bus)还容易操作一些。但是如果项目庞大,组件结构复杂,组件间的数据传递会变得很困难,后期代码不易维护。
看到这里,貌似明白了些这鬼东西是要解决什么问题了。好的,然后我们继续往“坑”里走。
最简单的store
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
- 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
// 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
现在,你可以通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更:
store.commit('increment'); // 触发修改变量的方法
console.log(store.state.count); // -> 1
WTF?这是啥,这不就是“全局变量”嘛!多个组件可能用到的数据,存储到 store(仓库)里,但是这些数据是响应式的,所以对这些数据进行操作时,要遵守相应的规则。例如上面的例子。对 count 进行修改,要通过 commit 来触发 mutation 里的方法对数据进行操作。
好了,喝口我的枸杞大补茶压压惊 [ 微笑 ]。从这里再往坑里走,才是 Vuex 的一些核心概念,他们是:
- State
- Getter
- Mutation
- Action
- Module
让我们开始吧。
State
Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
这段话说的是一个 Vuex 只能包含一个store(存储数据的库),这样你在访问数据的时候好找些。
store 的其中一个配置项就是 state 。这个state吧,可以把他比作成vue实例中的data选项,就是把数据放在这里面。
const state = {
// 商品列表
shopList:[{
id: 1,
name: '兰博基尼',
price: 10
},{
id: 2,
name: '五菱宏光',
price: 99999
}],
// 购物车列表
addList: []
};
new Vuex.Store({
state, // 这里是es6语法,相当于 state: state
...
});
获取商品列表 this.$store.state.shopList
就能看到了,或者使用辅助函数mapState,这样虽然方便简单,建议新手先研究一下 es6 和方法原理,这里不做解释。
computed: mapState([
// 映射 this.shopList为 store.state.shopList
'shopList'
])
Vuex 文档中有很多 es6 语法,如果有还不了解的同学们,可要抓紧上车喽。
Getter
我一度怀疑是不是文档写错了,少加了一个s。(Getters)
这一项从字面意思上就可以看出,他是用来取数据,得到数据的。有人会问,为什么不直接用this.$store.state.shopList
这种方式直接拿呢。这种方式确实可以拿到,但是经常会有一些情况是对拿到的数据做一些处理,例如格式化、过滤数据。。。这时候就会用到 Getter 了。
const getters = {
// 获取id为2的商品
shopid2(state){
return state.shopList.find((el)=>{
return el.id == 2;
});
}
};
使用this.$store.getters.shopid2
得到五菱宏光,即可加入秋名山车神争霸,走上人生巅峰。
辅助函数 mapGetters 方法:
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'shopid2'
// ...
])
}
}
Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
你需要以相应的 type 调用 store.commit 方法:this.$store.commit('increment')
你想要动我的数据,就得守我 Vuex 的规矩(顺我者昌,逆我者亡)。
拿数据用 Getters ,改数据用 mutation 。这个 mutation 有点像 vue 的生命周期钩子函数,里面是一些方法,通过 this.$store.commit(typeName)
对应的函数名称,触发对应的函数。
提交载荷(Payload)
你可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload):
// ...
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10);
// 在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
store.commit('increment', {
amount: 10
})
辅助函数 mapMutations 方法:
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}
}
在 Vuex 中,mutation 都是同步事务:
store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成。
为了处理异步操作,让我们继续往下走 。
Action
Action 类似于 mutation,不同在于:
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
也就是说,Action 执行的还是 Mutation ,只不过他可以异步执行,差不多就是给 Mutation 外边包了一层函数。
乍一眼看上去感觉多此一举,我们直接分发 mutation 岂不更方便?实际上并非如此,还记得 mutation 必须同步执行这个限制么?Action 就不受约束!我们可以在 action 内部执行异步操作:
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment'); // 在异步函数成功后调用 Mutation
}, 1000)
}
}
通过 this.$store.dispatch('incrementAsync')
即可调用。
辅助函数 mapActions 方法
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
}
Module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
Module 的意思也不难理解,如果你有很多的状态,都写在一起会比较乱,后边也不好改,你就可以给他们分个类,比如 moduleA 是我的购物车模块的状态管理,moduleB 是我的商品信息模块的状态管理。
对于大型应用,我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例:
├── 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?
这个嘛,很简单。你觉得你的项目里,各组件之间传参什么的,相处的很和谐,那就无所谓用不用了。
当你的组件兄弟们有传参问题,有很多这个组件要用,那个组件要,其他好几个组件也要,要的你生不如死,你就可以考虑一下了。
总结
最后,我们再回顾一下 Vuex 都包含什么,是做什么用的。
store
俗称仓库,仓库里是你的模块的数据、数据状态、对数据做的操作,都在这个仓库里。
state
仓库里的数据都放到这个里面,很像 vue 的 data 。
getters
通常获取可以用this.$store.state.shopList
就可以拿到,但是如果你想对这项数据加工一下(格式化、过滤),就在 getters 里处理,然后通过this.$store.getters.eventName
获取。
mutation
修改数据操作,你想对某项数据进行修改,就得守规矩。不能用this.$store.state.count=99
,要把修改函数写在 mutation 里面,用this.commit('eventName')
触发修改函数。注意,这里的操作必须是同步。
action
异步触发 mutation 。
module
给多个状态模块分类。
作者:前端很忙
链接:https://www.jianshu.com/p/5624362cd1f4
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
Vuex听说很难?的更多相关文章
- 听说 JVM 性能优化很难?今天我小试了一把!
文章首发于公众号「陈树义」及个人博客 shuyi.tech,欢迎关注访问. 对于 Java 开发的同学来说,JVM 性能优化可以说是比较难掌握的知识点.这不仅因为 JVM 性能优化需要掌握晦涩难懂的 ...
- 转:Eric Lippert:阅读代码真的很难
转自:http://blog.jobbole.com/438/ 相关文章 微软资深软件工程师:阅读代码真的很难(第2篇) 阅读优秀代码是提高开发人员修为的一种捷径 学会阅读源代码 如何阅读大型代码库? ...
- 函数式编程很难,这正是你要学习它的原因 | 外刊IT评论网
函数式编程很难,这正是你要学习它的原因 | 外刊IT评论网 函数式编程很难,这正是你要学习它的原因 156 次分享 新浪微博 腾讯微博 Tweet 人人网 QQ空间 很奇怪不是,很少有人每天都使用函数 ...
- Scala很难!
Scala很难! 本文是从 Yes, Virginia, Scala is hard 这篇文章翻译而来. 首先要说的是,我是一个Scala粉丝,我作为一个Scala语言的倡导者差不多有5年历史了.我写 ...
- UI培训就业会很难吗
众所周知UI是研究人机交互的学科,他是从互联网发展而来的,单从目前它的应用领域来看,主要应用于软件.互联网.移动智能设备.游戏和虚拟现实影音方面.这些都是新兴的热门方向和活跃领域.目前人才缺口和社会需 ...
- 最近面试java后端开发的感受:如果就以平时项目经验来面试,通过估计很难——再论面试前的准备
在上周,我密集面试了若干位Java后端的候选人,工作经验在3到5年间.我的标准其实不复杂:第一能干活,第二Java基础要好,第三最好熟悉些分布式框架,我相信其它公司招初级开发时,应该也照着这个标准来面 ...
- No bean named 'xxxxx' is defined异常,已解决,这个坑很难发现,你get了吗
出现No bean named 'xxxxx' is defined异常 没有定义名为xxx的bean 如果你的代码写的都对,根本问题只有一个地方出错了,那就是你的 basePackage=的包名路径 ...
- js混淆加密,通过混淆Js代码让别人(很难)无法还原
js混淆加密,通过混淆Js代码让别人(很难)无法还原 使用js的混淆加密,其目的是为了保护我们的前端代码逻辑,对应一些搞技术吃饭的公司来说,为了防止被竞争对手抓取或使用自己的代码,就会考虑如何加密 ...
- 关于UIScrollView有些你很难知晓的崩溃情形
关于UIScrollView有些你很难知晓的崩溃情形 为了实现以下的功能(按钮之间的切换效果): 简短的代码如下: // // RootViewController.m // BUG // // Co ...
随机推荐
- 微服务(Microservices)和服务网格(Service Mesh)的架构概念
注:文章内容为摘录性文字,自己阅读的一些笔记,方便日后查看. 微服务(Microservices) 在过去的 2016 年和 2017 年,微服务技术迅猛普及,和容器技术一起成为这两年中最吸引眼球的技 ...
- Tools: java安装指南
参考: https://www.cnblogs.com/smyhvae/p/3788534.htmljava安装 (1)新建->变量名"JAVA_HOME",变量值" ...
- swiper-animate
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue登录登出以及JWT认证
数据模型 主要用户名,密码,邮箱,头像,身份 const mongoose = require('mongoose') const schema = new mongoose.Schema({ use ...
- leetcode-159周赛-5230-缀点成线
自己的提交: class Solution: def checkStraightLine(self, coordinates: List[List[int]]) -> bool: if not ...
- leetcood学习笔记-54-螺旋矩阵
题目描述: 第一次提交: class Solution: def spiralOrder(self, matrix: List[List[int]]) -> List[int]: j,x = 0 ...
- Redis缓存数据库常见操作
Jedis的最为常见的操作.主要包括常用的列表(list).集合(set).有序集合(sorted set).哈希表(hash)等数据结构,以及其他特性支持. 参考资料:http://hello-ni ...
- NX二次开发-UFUN编辑添加哪些图层UF_LAYER_edit_category_layer
1 NX11+VS2013 2 3 #include <uf.h> 4 #include <uf_layer.h> 5 6 7 UF_initialize(); 8 9 //创 ...
- mave打包spring项目成jar,启动报错:Offending resource: URL [
文章目录 错误 解决 错误 Offending resource: URL [jar:file:/Users/leesin/intellij-idea-workspace/rabbitMq_Consu ...
- maven配置私服中可能遇到的问题
文章目录 之前要写一个hsf的demo,maven的依赖是需要alibaba的私服的,所以出现了下面的错误. 具体参看另一篇文章:https://blog.csdn.net/dataiyangu/ar ...