千锋教育前端Vue3.0全套视频教程(Kerwin2023版,Vue.js零基础

Vuex 是一个专为 Vue.js 应用程序开发的状态管理器,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。在进行组件间通信时,vuex作为常用的状态管理器,可以跨层级组件通信,其可以存储数据并可以进行调试。
每一个 Vuex 应用的核心就是 store(仓库)。“store”就是一个容器,包含着应用中大部分的状态 (state)。Vuex 和单纯的全局对象相比,Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
同时vuex中它是一个单一数据源,所有数据都存储在state属性对象中,此对象原则上不允许直接去修改,修改它要通过mutation属性进行修改,其可以实现同步操作的修改。而mutation 必须是同步函数的原因就是每一条 mutation 被记录devtools 都需要捕捉到前一状态和后一状态的快照。如果是异步函数中的回调让这不可能完成,因为当 mutation 触发的时候,回调函数还有可能没有被调用,devtools 不知道什么时候回调函数实际上被调用一一实质上任何在回调函数中进行的状态的改变都是不可追踪的。
如果是异步数据的修改的话,就需要通过actions属性中的方法来获取异步数据,然后通过actions中的方法来调用commit来调用mutation中的方法来修改state。而通过action属性进行异步修改时先在原始组件中将需要进行修改操作的那一步处将事件使用dispatch进行抛发,抛发给this.$store,同时将数据传输过去。在此之后定义的store中的actions属性就会调用commit来让mutation对数据进行修改,然后state中的信息就会改变。其实action 类似于 mutation,不同在于:action 提交的是 mutation,而不是直接变更状态;action 可以包含任意异步操作。