vuex的理解

2022-03-12  本文已影响0人  千杯不倒王尧

什么是vuex?使⽤vuex能够解决什么问题?

vuex是vue官方给我提供的一个状态管理工具,主要是为了解决组件之间数据共享的问题。

vuex的五⼤核⼼是什么?

vuex的五大核心分别是:state:里面存放着状态,也可以理解为一个数组,mutations:修改state的状态,里面定义的方法是同步的,actions:修改state的状态,不过里面定义的方法可以是异步操作,getters:获取state的状态处理后返回,类似于vue中的computed计算属性,modules,模块化处理,当我们项目较大的时候,vuex里会存着较多的状态,如果都放在index.js文件里,会显得文件非常的臃肿,后期难以维护,所以我们利用module进行模块化处理,将多个状态抽离到对应的js文件中,再用modules进行合并,这样就方便后期的维护。

在组件⾥⾯如何调⽤五⼤核⼼的属性和⽅法?

state:this.$store.state

mutations:this.$store.commit

actions:this.$store.dispatch

getters:this.$store.getters

除此之外我们还可以利用辅助函数mapState,mapGetters,mapMutations,mapActions

vuex的执⾏机制是什么?

在项目中我们要修改state状态的时候,我们需要使用this.$store.dispatch来触发actions中定义的方法,在actions里面定义的方法通过commit来调用mutations定义的方法来改变state状态,这也是vuex的执行机制

vuex的弊端是什么?怎么解决?

当我们刷新页面的时候,vuex存储的数据会丢失,我们一般结合本地存储来解决,在mutations中修改state状态的时候配合localStorage和sessionStorage来实现本地存储,在state状态的属性值写一个三元表达式,判断本地中是否存有数据,有数据就赋值,没有就给一个null,在项目中我们经常使用vuex来保存用户信息和token以及其他的一些用户信息

上一篇 下一篇

猜你喜欢

热点阅读