vue中状态管理器的工作流程

vue中状态管理器的工作流程最近用vue写了状态管理器感觉里面的逻辑比较复杂吧今天我先整理了一下vue中API和自己的理解总结了一下没有代码光理解vue API中的解释stateVuex 使用单一状态树——是的用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段在调试的过程中也能轻易地取得整个当前应用状态的快照。单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。Getter如果有多个组件需要用到此属性我们要么复制这个函数或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。Vuex 允许我们在 store 中定义“getter”可以认为是 store 的计算属性。就像计算属性一样getter 的返回值会根据它的依赖被缓存起来且只有当它的依赖值发生了改变才会被重新计算。Mutation更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方并且它会接受 state 作为第一个参数。ActionAction 类似于 mutation不同在于Action 提交的是 mutation而不是直接变更状态。Action 可以包含任意异步操作。Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象因此你可以调用 context.commit 提交一个 mutation或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时你就知道 context 对象为什么不是 store 实例本身了。Module由于使用单一状态树应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时store 对象就有可能变得相当臃肿。为了解决以上问题Vuex 允许我们将 store 分割成模块module。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。自己的一些理解和总结吧想必大家已经被api中解释搞得半懂不懂吧接下来我通过图片加上一些自己对状态管理器的理解总结一下。从上图可以开始状态管理器就是把vue编程中的对数据操作和异步操作分离出去从而更好地能改变和维护程序。然后是我的一些应用的理解总结1.先是在你的组件的store.js中也就是处理状态的文件夹中放入statestate其实就是组件的初始数据。2.getters 状态管理器里的计算属性因为有很多的复杂的计算应用一有复杂的计算应用就需要应用到计算属性但是状态管理器store.js中没有计算属性于是就在这里加入了getters方便处理数据。3.actions 在这里是进行接收数据对数据进行操作并在getters和接收到处理完的数据通过commit将数据传送到下一个属性mutations中的属性名中。4.mutations 在mutations中是状态管理器中唯一能改变数据的地方把action中处理完的数据在mutations中改变数据。它是唯一能触摸到vue中的虚拟dom状态的地方。(虚拟dom是什么可以自己去了解)5. 组件内的状态管理器就算设置好了然后外面根项目中的总store.js管理器当中引入模块化管理先是import引入要引进的组件中store.js,在export中引出模块这样就可以方便管理和维护。6. 最后就得去组件内部中引入vuex在组件中用钩子函数得到$store的状态用dispatch触发Action的状态让Action里的动作能够运行从而改变了值得到了新的数据。然后利用组件中的计算属性得到改变的值再利用计算属性的原理从来改变文档渲染的效果。