服务器之家

服务器之家 > 正文

一文让你彻底搞懂Vuex,满满的干货

时间:2021-10-20 21:12     来源/作者:前端人

一文让你彻底搞懂Vuex,满满的干货

官方解释:Vuex 是专为 vue.js 应用程序开发的状态管理模式。

一、Vuex 是做什么呢?

什么是状态管理?

简单地讲:可以把多个组件都需要的变量全部存储到一个对象里面,然后这个对象放在顶层的 vue 实例中,让其他组件可以使用。这样多个组件就可以共享这个对象中的所有属性。

有些同学想着,这么简单我们自己在vue顶层定义一个对象不就可以实现共享了?我们发现虽然数据可以获取到,但是如果在某个组件内,数据改变了,那我们如何修改数据,让此数据在其他组件内保持最新呢?

我们的vuex就是为了提供一个在多个组件间共享状态的插件,而且能够实现实时响应。

二、Vuex 使用

vuex 是管理组件之间通信的一个插件,所以使用之前必须安装。

2.1、安装

1)使用 script 方式引入

  1. "https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js">

2)使用包管理

  1. npminstallvuex--save//yarnaddvuex

注意:vuex 必须依赖 vue 使用

2.2、搭建 store 实例

创建一个 store 文件夹,新建 index.js

  1. importVuefrom"vue";
  2. importVuexfrom"vuex";
  3. Vue.use(Vuex);//使用vuex
  4. exportdefaultnewVuex.Store({
  5. state:{},
  6. mutations:{},
  7. getters:{},
  8. actions:{},
  9. modules:{}
  10. })

在 main.js 处,挂载 store

  1. importstorefrom'./store'
  2. newVue({
  3. router,
  4. render:h=>h(App)
  5. })
  6. //相当于
  7. //Vue.prototype.$store=store

2.3、使用状态

  1. //store中定义状态
  2. state:{
  3. statue:'在线'
  4. }
  5. //在组件内使用
  6. 组件内数据:{{$store.state.status}}
  7. //在js中使用
  8. mounted(){
  9. console.log(this.$store.state.status)
  10. }

三、Vuex 的五大核心

3.1、state

state 存放 vuex 的基本数据,用来存储变量的。

单一状态树

Vuex 使用单一状态树,即用一个对象就包含了全部的状态数据。state 作为构造器选项,定义了所有我们需要的基本状态参数。

在组件中引用 state 数据方式:

1)通过 vue 的 computed 获取 vuex 的 state

  1. exportdefaultnewVuex.Store({
  2. state:{
  3. online:true
  4. }
  5. })
  6. computed:{
  7. status(){
  8. returnthis.$store.state.online
  9. }
  10. }

store 中的数据发生改变时,都会重新求取计算属性,并更新相关 DOM。

2)如果需要使用多个参数时,都使用 computed 计算属性,就会使代码变的有些冗余和复杂,此时我们就可以借助 mapState 辅助函数。

  1. //state中数据比较多,引用到一个组件内
  2. exportdefaultnewVuex.Store({
  3. state:{
  4. online:true,
  5. per:[
  6. {name:'qq',age:18}
  7. ],
  8. role:'管理员'
  9. }
  10. })
  11. //组件内
  12. import{mapState}from'vuex'
  13. exportdefault{
  14. name:'App',
  15. computed:mapState({
  16. online:state=>state.online,
  17. per:'per',//'per'就相当于state.per
  18. role:'role'//'role'就相当于state.role
  19. })
  20. }

vuex 使用单一状态树来管理应用层级的全部状态,单一状态树能够让我们最直接的方式找到某个状态的片段,而且之后的维护和调试过程,也可以非常方便管理和维护。

3.2、getters

从 store 中获取一些 state 变异后的状态。

使用的时候一般有两种方式:

1)返回的结果只依赖于 state 中的数据

  1. exportdefaultnewVuex.Store({
  2. state:{
  3. count:2,
  4. },
  5. getters:{
  6. //返回count的2倍数据
  7. countDouble(state){
  8. returnstate.count*2
  9. }
  10. }
  11. })
  12. //组件中引用
  13. 获取countDouble:{{$store.getters.countDouble}}
  14. //运行结果
  15. 获取countDouble:4

此处,$store.getters.countDouble 的使用与上边的 $store.state.count 是一样的。

2)getters 中返回的变异结果,依赖于某个 getters 中属性返回结果

  1. exportdefaultnewVuex.Store({
  2. state:{
  3. count:2,
  4. },
  5. getters:{
  6. //返回count的2倍数据
  7. countDouble(state){
  8. returnstate.count*2
  9. }
  10. //返回countDouble的2倍数据
  11. countDoubleT(state,getters){
  12. returngetters.countDouble*2
  13. }
  14. }
  15. })
  16. //组件中引用
  17. 获取countDouble:{{$store.getters.countDoubleT}}
  18. //运行结果
  19. 获取countDouble:8

3.3、mutations

vuex 的store 状态的更新唯一方式:提交 Mutation。

Mutations 主要包括两部分:

字符串的事件类型

一个回调函数,该回调函数的第一个参数就是 state。

1)mutation 中的方法通过 commit 调用,不传参数使用:

  1. exportdefaultnewVuex.Store({
  2. state:{
  3. count:2,
  4. },
  5. mutations:{
  6. incrs(state){
  7. //count加1
  8. state.count++
  9. }
  10. }
  11. })
  12. //组件调用
  13. "$store.commit('incrs')">+
  14. {{$store.state.count}}

按钮每点一次,count 就会自加一次。

2)mutations 传递参数

我们点击加按钮时,指定每次点击增加的数值,如下:

  1. exportdefaultnewVuex.Store({
  2. state:{
  3. count:2,
  4. },
  5. mutations:{
  6. addNum(state,n){
  7. //count加1
  8. state.count+=n
  9. }
  10. }
  11. })
  12. //组件调用
  13. "$store.addNum('incrs',5)">+
  14. {{$store.state.count}}
  15. //运行结果
  16. 每点一次按钮,count增加5

上个实例传递的是一个参数,如果我们需要传递多个参数时,该如何实现呢?

3)mutations 传递多个参数

  1. exportdefaultnewVuex.Store({
  2. state:{
  3. count:2,
  4. },
  5. mutations:{
  6. addNum(state,payload){
  7. //payload是传递过来的参数对象
  8. state.count+=payload.count
  9. }
  10. }
  11. })
  12. //组件调用
  13. "addTen">加10
  14. {{$store.state.count}}
  15. exportdefault{
  16. methods:{
  17. addTen(){
  18. this.$store.commit({
  19. type:'addNum',
  20. count:10,
  21. ...//可以传任意多个参数
  22. })
  23. }
  24. }
  25. }
  26. //运行结果
  27. 每点一次按钮,count增加10

上述方法是 mutations 特殊的提交封装。包含了 type 属性的对象,将整个 commit 的对象作为 payload 使用。

3.4、actions

mutations 提交更新数据的方法,必须是同步的,如果是异步使用就会出现问题,然后在项目开发中往往就会用到异步更新,比如网路请求数据。

actions 是类似于 mutation,功能大致相同,但是 actions 是用来替代 mutations 进行异步操作的。

1)actions 的基本使用

  1. actions:{
  2. aUpdateCount(context){
  3. setTimeout(()=>{//使用定时器模拟异步操作
  4. context.commit('updateCount')
  5. },2000)
  6. }
  7. },
  8. mutations:{
  9. updateCount(state){
  10. state.count=5201314
  11. },
  12. }
  13. //组件内使用
  14. {{$store.state.count}}
  15. "$store.dispatch('aUpdateCount')">异步更新count
  16. //运行结果
  17. 点击按钮,两秒后更新count值为5201314

值得注意的是,使用 actions 异步更新数据的时候,还是需要经过 mutations 中的方法,state 中的数据只能由 mutations 中的方法修改。

调用 mutations 中的方法,使用 commit 调用。

调用 actions 中的方法,使用 dispatch 调用。

2)异步更新的时候,也可以带参数

  1. //功能:点击按钮,指定count修改的值
  2. actions:{
  3. aUpdateCount(context,payload){
  4. setTimeout(()=>{//使用定时器模拟异步操作
  5. context.commit('updateCount',payload)
  6. },2000)
  7. }
  8. },
  9. mutations:{
  10. updateCount(state,payload){
  11. state.count=payload
  12. },
  13. }
  14. //组件内使用
  15. {{$store.state.count}}
  16. "$store.dispatch('aUpdateCount','我爱前端')">异步更新count
  17. //运行结果
  18. 点击按钮,两秒后更新count值为:我爱前端

3)传入异步参数

  1. actions:{
  2. //传入promise
  3. updateData(context,payload){
  4. returnnewPromise((resolve,reject)=>{
  5. setTimeout(()=>{
  6. resolve('我学会了')
  7. },2000)
  8. })
  9. },
  10. }
  11. //组件内调用
  12. "ok">promise执行成功,返回"我学会了"
  13. methods:{
  14. ok(){
  15. this.$store.dispatch('updateData').then((res)=>{
  16. console.log(res)
  17. })
  18. },
  19. }
  20. //运行结果
  21. 点击按钮,两秒后打印:我学会了

3.5、modules

modules 是模块的意思,vue 使用单一状态树,项目越来越大,store 中的数据越来越多,不便于数据的管理和维护,代码也会变得臃肿。因此使用 modules ,把数据划分到对应的某个模块,既便于开发,也提高代码的可读性。

1)modules 简单使用

  1. importVuefrom'vue'
  2. importVuexfrom'vuex'
  3. import{Increase}from'./mutation_type.js'
  4. Vue.use(Vuex)
  5. exportdefaultnewVuex.Store({
  6. state:{},
  7. actions:{},
  8. getters:{},
  9. mutations:{},
  10. modules:{
  11. a:{
  12. state:{},
  13. getters:{},
  14. mutations:{},
  15. actions:{}
  16. },
  17. b:{
  18. state:{},
  19. getters:{},
  20. mutations:{},
  21. actions:{}
  22. }
  23. },
  24. })
  25. //也可以整理为
  26. constmoduleA={
  27. state:{},
  28. getters:{},
  29. mutations:{},
  30. actions:{}
  31. }
  32. constmoduleB={
  33. state:{},
  34. getters:{},
  35. mutations:{},
  36. actions:{}
  37. }
  38. Vue.use(Vuex)
  39. exportdefaultnewVuex.Store({
  40. state:{},
  41. actions:{},
  42. getters:{},
  43. mutations:{},
  44. modules:{
  45. a:moduleA,
  46. b:moduleB
  47. },
  48. })

2)模块中的数据如何使用呢?

  1. constmoduleA={
  2. state:{
  3. aName:'我是模块a的数据'
  4. },
  5. getters:{},
  6. mutations:{},
  7. actions:{}
  8. }
  9. //组件内引用
  10. {{$store.state.a.aName}}

3)调用模块内的 mutations 中的方法,如何调用呢?

  1. $store.commit('aChangeName')

调取模块内的 mutations 中的方法,与之前是一模一样的,程序会先从第一层 store 中查找方法,找不到方法时会继续去模块中查找。

4)调用模块内的 getters 内方法

  1. $store.getters.getName

需要注意的是,getters 中方法都是对 state 中数据变异,如果模块的 getters 方法需要根 store 中的 state 呢?

  1. getName(state,getters,rootState){
  2. //state表示当前模块的state
  3. //getters表示当前模块的getters
  4. //rootState表示根store内的state
  5. }

5)模块内的 actions 中的方法,使用 commit 调用 mutations 中方法时,只能调用本模块内的 mutations 方法,不能调用外层的。

四、Vuex 数据响应原理

Vuex 的 store 中的 state 是响应式的,当 state 中数据发生改变时,vue 组件会自动更新。这就要求我们必须遵守一些vuex对应的规则:

提前在 store 中初始化好所需的属性。

说人话,就是必须在state中定义的属性才能做到响应式,如果是后加或删除的,无法做到响应式。

举个栗子:

  1. mutations:{
  2. changeName(state){
  3. state.info.name='爱学习的前端人'
  4. },
  5. addAdrs(state){
  6. state.info['address']="陕西西安"
  7. },
  8. }
  9. {{this.$store.state.info}}
  10. "$store.commit('changeName')">修改姓名
  11. "$store.commit('addAdrs')">增加地址

此时点击修改姓名的时候,可以做到响应式,而点击“增加地址”按钮时,页面没有任何反应,但是在开发者模式中可以看到数据有变化。

我们要响应式,该如何实现呢?

  1. addAdrs(state){
  2. state.info['address']="陕西西安"
  3. //修改为:
  4. Vue.set(state.info,'address','陕西西安')
  5. },

同样的如果要删除 age 属性时,使用 delete 也做不到响应式,需要修改为 Vue.delete。

实例:响应式删除 age 属性

  1. deleteAge(state){
  2. //deletestate.info.age
  3. //修改为
  4. Vue.delete(state.info,'age')
  5. },
  6. //组件内容
  7. {{this.$store.state.info}}
  8. "$store.commit('deleteAge')">删除年龄

五、类型常量

在 mutation 中定义很多事件类型,也就是方法名。当项目越来越大时,Vuex 管理的状态越来越多,需要更新状态的情况越来越多,那么意为着 Mutations 中的方法名越来越多,方法过多时,使用的时候需要花费大量精力去记住或来回切换文件找方法名,这样很容易出错,所以推荐大家使用一个常量,即使方法名出错了,也会将错就错,程序并不会发生异常。

如:

  1. //新建mutation_type.js文件
  2. //导出一个常量
  3. exportconstIncrease='increase'
  4. //store.js文件
  5. importVuefrom'vue'
  6. importVuexfrom'vuex'
  7. import{Increase}from'./mutation_type.js'
  8. Vue.use(Vuex)
  9. exportdefaultnewVuex.Store({
  10. state:{
  11. count:2,
  12. },
  13. mutations:{
  14. [Increase](state){
  15. state.count++
  16. },
  17. }
  18. })
  19. //组件内容
  20. {{$store.state.count}}
  21. "add">加10
  22. import{Increase}from'./store/mutation_type'
  23. sxportdefault{
  24. methods:{
  25. add(){
  26. this.$store.commit(Increase)
  27. }
  28. }
  29. }

使用的时候,只需要记住 Increase 或者在 mutation_type.js 文件内查找就好了。

原文链接:https://www.toutiao.com/a7012144273474748958/

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部