vuex的超详细讲解和具体使用细节记录(篇幅略长,建议收藏)
什么是vuex
官方定义
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
初学vuex,读完这段官方定义以后,黑人问号,感觉每个字都认识,但是合在一块了,好像就不理解了。好叭,让我们用大白话翻译一下。补充:官方文档定义一个概念的时候,的确是要做到表述凝练简洁,所以就会出现这样的定义概念略有晦涩的情况大白话讲解
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
vuex是为vue.js项目开发的一个插件(包),这个插件(包)主要就是用来做
状态管理
的。
问:什么是状态管理,状态管理就管理状态的(好像是废话),其实在开发中,有一个比较常听到的词就是状态,何为状态?我们知道灯泡开和关分别是一种固定状态,我们可用1代表开,0代表关。这样的话,用数字就可以代表状态了,那反过来说,状态就是数据的具体表现形式,所以我们可以这样理解:状态管理就是数据管理,进一步而言,vuex就是去管理vue中的数据的
- 它采用集中式存储管理应用的所有组件的状态
鲁迅说:vue是组件化开发,就是把一个页面拆分成一小块一小块。每一小块都要有自己的数据用来呈现。比如下拉框有下拉框供选择的数据,表格有表格要呈现的数据。那么这些数据可以直接放在.vue文件中的data里面去管理,但是如果是大项目的话,数据放在.vue中的data去管理略有欠缺。所以:可以使用vuex去统一存放管理各个组件的数据。vuex就像一个仓库,用来存放组件中需要用到的数据,至于管理,就是增删改查,往vuex中存取、修改、删除等操作
- 并以相应的规则保证状态以一种可预测的方式发生变化
这句话的意思就是,想要存取、修改、删除vuex仓库中的状态数据,需要按照一定的语法规则,比如按照 action--> mutaion--> state的规则去增删改查,比如使用辅助函数如增删改查vuex中的数据。这个具体的规则下文中的vuex使用步骤中会逐一讲解
vuex的应用场景
- 正常数据放到data里面就行了,免得麻烦,一般小项目都很少用到vuex,毕竟vuex的步骤稍微多一点
- 一般公共数据放到vuex中会比较好,毕竟组件有自己的data可以存放数据,公共的变量如用户信息、token等。vuex存一份,localstorage再存一份,取数据直接从vuex里面取,取不到再从localstorage里面去取。
- 跨很多组件层级的数据通信,也可以通过vuex去做管理,毕竟vuex就像一个对象一个,好多组件都指向这个对象,当这个vuex对象发生了变化,所有的组件中对应的内容都会发生变化,这样就能做到实时响应,一个变,大家都变
首先要搭建好项目,搭建项目的过程不赘述,项目搭建好了,我们就可以按照如下步骤使用vuex了第一步 npm下载安装vuex插件
因为vuex是特定的用来管理vue中的数据的一款插件,所以按照可插拔框架的思想,想要使用vuex就下载安装,不想用的时候就卸载即可
npm install vuex --save
第二步 新建store文件夹注册使用vuex插件
如下图:
文章图片
把store对象挂载到vue对象上面的话,那么每个组件都可以访问到这个store对象了,那么每个组件都能去使用vuex了打印的vue实例对象如下图
文章图片
看一下$store的上具体内容
文章图片
既然vue的总实例上挂载的vuex的$store对象中有我们定义的state、mutations、actions、getters,那么我们通过this.$store...就可以在各个组件上访问、使用vuex中数据了。这么一来,就验证了vuex文档中的那句话:
vuex采用集中式存储管理应用的所有组件的状态
是啊,都集中在vue实例上了,所有组件的状态都可以访问到了。其实学习vuex就是学习两点:第三步 读取vuex中仓库的数据
- 如何读取vuex中仓库的数据
- 如何修改vuex中仓库的数据
在上述代码中,我们已经在vuex中的state里面定义了一个msg属性,再贴一下代码
export default new Vuex.Store({
state:{
msg:'我是vuex哦'
},
// 等...
})
接下来我们在组件中使用这个数据,并呈现在页面上
方式一 双括号表达式直接使用(不推荐)
{{this.$store.state.msg}}
方式一不太优雅,一般不用,主要用方式二或方式三
方式二 mounted中去取用vuex中的数据
{{msg}}
方式三 使用computed去取vuex中的数据
{{msg}}
第四步 修改vuex中的数据
一般是在事件的回调函数中去修改vuex中的数据,比如我们点击一个按钮,去修改vuex中的数据
方式一 直接修改(不推荐)
{{msg}}
修改
这种方式勉强能用,不过vuex当开启了严格模式的时候,就会报错,开启严格模式代码如下:
export default new Vuex.Store({
strict:true, // 开启严格模式
state:{
msg:'我是vuex哦'
},
// 等...
})
报错信息图如下:
文章图片
报错信息含义
Error:[vuex] do not mutate vuex store state outside mutation handlers.
不要不通过mutation的操作就去修改vuex中store里面的state状态值
所以由此我们就想到了vuex定义的那句话:
并以相应的规则保证状态以一种可预测的方式发生变化
这里的相应的规则
就是指,想要修改vuex中的数据,就要按照vuex中操作数据的步骤流程规则来,嘿嘿,要不然就给你报错。那么vuex定义的修改state的规则是什么呢?请看下图方式二 action-->mutation-->state 我们先看一下官方给到的图解
文章图片
看完上图以后,我们可以总结vuex的使用规则如下
- 组件想要去更改vuex中的数据,但是组件自己只是口头传唤一下actions干活,即:dispatch一下actions
(组件说:嘿,actions,我要更改vuex中的数据了,你发个请求,从后端接口中拿到我要的数据去更改一下)
- action得到消息后,就会向后端发请求,获取到后端返回的数据,action拿到后端返回的数据以后,就把数据commit提交给mutations,即:commit一下mutations
(actions拿到数据以后,但是也比较懒,把数据交给仓库管理员mutations,告知要更改对应数据以后,就撤了)
- mutations相当于最终的仓库管理员,由这个仓库管理员去修改vuex仓库中的数据,即:mutate一下state
(mutations任劳任怨,就去更改vuex中state的数据,更改完以后,就等待下一次的干活,mutations修改数据的过程,会被仓库的监控,也就是vue的开发工具devTool记录下来)
- 而vue数据是响应式的,仓库数据一改变,对应使用仓库数据的组件就会重新render渲染,所以页面效果也就改变了
组件中如果不是异步发请求去更改数据,也可以直接跳过actions,直接让仓库管理员mutations去修改数据,不过这种方式不是太多代码如下
// 组件
{{msg}}
修改
// vuex
export default new Vuex.Store({
strict:true,
state:{
msg:'我是vuex哦'
},
mutations:{
// 这里第一个形参state就是仓库state,是可以访问到state里的msg的值,即 可以修改state
// 第二个形参params是actions中传过来的数据
mutationsChange(state,params){
console.log(state,params);
state.msg = params
}
},
actions:{
// 这里的形参store对象下面有commit方法
// 可以去告知对应的mutations中的函数执行
actionsChange(store){
console.log(store);
setTimeout(() => {
store.commit('mutationsChange', '规范修改vuex')
}, 500);
}
}
})
效果图如下
文章图片
devtool记录mutations的操作
文章图片
补充getter加工 getter中我们可以定义一个函数,这个函数我们用来修改state中的值的,函数接收一个参数state,这个state参数就是当前的state对象,通过这个参数可以加工state中的数据,加工好return出去,以供组件中使用
// vuex
export default new Vuex.Store({
strict:true,
state:{
msg:'我是vuex哦'
},
getters:{
gettersChange(state){
return state.msg + '---getter修改state中的数据'
}
},
})
组件中使用的时候,就直接使用getter中的数据即可,如下:
this.$store.getters.gettersChange
当然也可以不用getter,就是在组件中取到vuex中的数据以后,我们再进行加工。不过能在getter中加工的最好就在getter中加工,因为这样写代码,比较优雅
辅助函数 函数函数的出现,就是为了让我们能少写几行代码,我们以获取vuex中state为例,假设我们在一个组件中需要获取多个state中的值,这样的话这个语句就要写多次,
this.$store.state.msg1、this.$store.state.msg2、this.$store.state.msg3等
。为了简化,vuex内部封装了四个辅助函数,分别用来对应state,mutations,actions,getters的操作。辅助函数,简而言之,就是尤大佬封装的语法糖
辅助函数一般搭配计算属性和方法使用mapState辅助函数
第一步,假设vuex仓库中有三个数据,我们需要在组件上使用这三个数据
// store.js
export default new Vuex.Store({
state:{
msg1:'辅助函数一',
msg2:'辅助函数二',
msg3:'辅助函数三',
},
}
第二步,从vuex插件中引入辅助函数
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
第三步,在计算属性中使用辅助函数mapstate取到state中的数据
// 方式一,数组形式
computed: {
...mapState(['msg1','msg2','msg3'])
},// 方式二, 对象形式(vuex模块化比较常用)
computed: {
...mapState({
msg1: state=>state.msg1,
msg2: state=>state.msg2,
msg3: state=>state.msg3,
})
},
第四步,在组件中直接就可以在差值表达式中使用了
{{msg1}}
{{msg2}}
{{msg3}}
第五步,页面效果图如下
文章图片
mapGetters辅助函数
使用方法和mapState基本一样
computed:{
...mapGetters(['msg']),
}
mapMutations辅助函数
比如,我们在按钮点击事件的回调函数中去触发mutations,对比一下,不用辅助函数和用辅助函数的语法书写区别
vuex结构
mutations:{
kkk(state,params){
state.msg = params
}
},
html结构
{{ msg }}
辅助函数mapActions
js代码
注意:使用辅助函数,貌似没有地方传参,实际是辅助函数帮我们默默的传递过去了,这个参数需要写在html结构中的点击语句中,如上述代码:
辅助函数mapActions
mapActions辅助函数
mapActions的用法和mapMutations的用法基本上一样,就换个单词即可,在此不赘述
...mapActions(["sss"])
意思是:去触发Actions中的sss函数
vuex的module模块化 提起模块化,思想还是那句话,大而化小,便于管理。很多语言都有模块化的应用,vuex也是一样。试想,如果所有的状态数据都写在一起,看着容易眼花缭乱,不便于管理。所以尤大老对于vuex的设计中,就做了模块化module的处理
图解步骤
文章图片
在组件中使用vuex模块化
获取vuex模块中的数据 这里以获取state中的数据为例,获取getters中的数据写法基本一样,不赘述
{{ msg }}
打印store对象,就可以看到对应的值
文章图片
修改vuex模块中的数据 这里以触发mutations为例,actions写法基本一致,不赘述
- 不使用辅助函数
{{ msg }}
模块化修改值
- 使用辅助函数
{{ msg }}
模块化修改值
注意,上述我使用vuex的模块化module的时候,没有加上命名空间命名空间namespace
,所以去提交对应模块下的mutations的时候,可以直接写this.$store.commit('moduleChange','我是参数')
或...mapMutations(['moduleChange'])
这样的话,vuex会去自己所有模块下去找moduleChange
这个函数,然后去修改。这样的话,略微浪费性能,因为,默认情况下,vuex模块内部的 action、mutation 和 getter 是挂载注册在 全局命名空间的,这样使得多个模块能够对同一 mutation 或 action去操作,就不停的找,直到找到为止。但是一般情况下,我们使用vuex模块化的时候都会加上命名空间,做到独立、复用。接下来我们说一下,vuex模块化的标准用法,即加上命名空间的用法
- 不加命名空间,所有的都找一遍。
- 加了的话,只去特定的模块找
- 所以使用命名空间的话,提交mutations写法就变了
// 不使用辅助函数
moduleChange(){
this.$store.commit('vue/moduleChange');
// 以斜杠分割,斜杠前写对应模块名,斜杠后写对应mutations中的方法名
}// 使用辅助函数
...mapMutations('vue',['moduleChange']) // 以逗号分割,逗号前写模块名,逗号后是个数组,数组中放置对应mutations中的方法名//3.别名状态下
...mapMutations({
anotherName:'vue/moduleChange' // 和不使用辅助函数一样
}),
总结 让我们还回到vuex官网下定义的那句话:
Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式**。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
貌似这样定义还挺好的,科学严谨...
最后一首打油诗送给各位看官,娱乐一下,哈哈
【vuex的超详细讲解和具体使用细节记录(篇幅略长,建议收藏)】《码破苍穹》
码宗强者名尤大
代码化翼走天下
随手祭出VUE
恐怖如斯真可怕
笔者码渣虽技薄
但却心中有梦呀
还望各位大佬们
点赞鼓励一下哈
推荐阅读
- 热闹中的孤独
- JAVA(抽象类与接口的区别&重载与重写&内存泄漏)
- 放屁有这三个特征的,请注意啦!这说明你的身体毒素太多
- 一个人的旅行,三亚
- 布丽吉特,人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事,我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量