Vuex深度解析：状态管理与实践应用-优快云博客

本文链接：https://blog.youkuaiyun.com/jerisem/article/details/123922464

Vuex作为Vue的状态管理器，提供state、getters、mutations、actions和modules等功能，便于数据共享和复杂操作。state存储基本数据，getters过滤state，mutations同步修改state，actions异步处理并提交mutation。modules用于大型项目中拆分state，提高可读性和维护性。Vuex简化组件间通信，解决数据传递难题，并常用在角色、用户信息等全局数据管理中。面对刷新丢失数据问题，可通过重新加载、持久化存储或使用persistedstate插件解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vuex是vue的一个核心的功能，官方关于vuex的介绍也占了大半边幅，vuex的话不管是在pc端、移动端还是我们小程序端都有广泛的使用

vuex是一个状态管理器，我们可以理解设计者这样的一个思路，像以前的安卓、ios，或者后台的一些java程序，他们都有一个全局的概念，就是我们把公共的东西放在全局里面来，那所有的页面都可以对这个东西存和取，那就会非常的方便。那vuex确实也是这样，他是一个状态管理模式，可以实现数据共享的这个目的。

vuex包含五个属性，分别是state，getters,mutation,action和modules

state：vuex的基本数据，用来存储变量(后四个属性都是用来操作state里面储存的变量的)
getters：是对state里面的变量进行过滤
mutation:提交更新数据的方法，必须是同步的(如果需要异步使用action)
action：和mutation的功能大致相同，不同之处在于：
1. Action提交的是mutation，而不是直接变更状态。也就是action是用来修改mutation并提交的而 mutation是通过修改state
2. Action可以包含任意异步操作。(一般比较复杂的数据都在action中操作)
3. action先会执行异步操作再去调用mutation，随后才跟新state
modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

简单的可以理解为state定义了数据，getters相当于理解为获取state里面的数据，mutation和action可以理解为对state里面的数据进行修改。mutation修改的数据方法必须是同步的，而且官方不建议直接修改state里面的数据，只能通过mutation来修改，action同样也是修改，和mutation有什么区别在于，action是异步的，他可以发起一些网络请求，获取结果之后呢再通过mutation再修改state数据，也就是修改数据的唯一途径还是mutation，所以说我们可以理解为action是依赖于mutation。项目中都有使用到，比如说要去获取用户的一些信息，uesrInfo的时候，这个操作本身是异步的，所以说把封装为action里面的一个方法，这样就可以异步的获取用户信息了。
        modules做了什么？，modules可以理解见名知其意是一个模块，vuex里面数据如果比较多的话，假如state里面有几十上百个基本数据的话，他的结构性可读性就比较差，那modules正好解决这样的问题，可以把state进行一个拆分，这样的话就可以看到modules名字然后就能想到state里面包含那些内容，他是为了代码的可读性，以及可维护性产生出来的东西，项目比较大的时候，整个项目会拆分为了七八个或者更多的modules，这样在后期维护的时候以及使用的时候会显得非常方便
         vuex既然是一个全局的容器，那他解决组件传值的话就非常方便，像兄弟，隔代，如果你使用自带的方式去传值就比较麻烦，如果用vuex去传值的话就显得非常方便，而且思路上还好理解，他其实就是通过vuex这个容器进行数据的周转
        vue还给我们提供了很多vuex的辅助函数，都是以map打头的，比如mapState，mapGetters,mapMutations,mapActions,在项目中，vuex还有广泛的应用场景，比如角色信息，用户信息，token信息只要是一些全局的东西，就可以往里面存
        vuex还有个经典的问题，那就是刷新数据会丢失，那针对这个问题，一般有三个解决思路，1、就是重新加载，在获取vuex里面的数据，发现没有了，那可能就是刷新丢失了，那就重新的去网络加载，加载之后重新存到vuex里面就好了。

2、持久化，刷新的时候会触发对应的生命周期函数，在即将就是的时候把数据存到sessionstorage，存到localstorage就可以，在刷新之后又会触发一个生命钩子函数，我们再把数据从localstorage或者sessionstorage里面取出来，把他存到vuex里面就可以了。

3、用vuex的persistedstate的这个插件，是现在比较主流的方式，可能是对持久化的封装，其实也是监听了刷新，开始刷新以及刷新结束这两个钩子函数分别做了一个数据的持久化，这个插件比较好用，对应的话他通过几个简单的配置就可以选择把这个数据持久化到哪里去，你可以持久化到cokie，也可以持久化到localstorage也可以持久化到sessionstorage，他比较方便，所以说项目中现在来讲的话直接用vuex的persistedstate插件可能是最好的

面试题 说说vuex

面试题说说vuex