栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

快速理解Vuex

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

快速理解Vuex

Vuex

一句话概括:state是数据源,mutation/action触发修改数据(getter封装数据),将state映射到view。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
每个应用将仅仅包含一个 store 实例
如果有些状态严格属于单个组件,最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。
----摘自官网

vuex.png

1.State

总结:存储状态管理数据

2.Getter

有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数。
Vuex 允许我们在 store 中定义『getters』(可以认为是 store 的计算属性)。
组件获取 state 用 vuex 的 getter。
Getters 会暴露为 store.getters 对象。
----摘自官网

总结:getter用于获取state数据(获取的数据可能经过封装,getters只是用来读取数据,不能用来改变数据。)

3.Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”
可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload)。在大多数情况下,载荷应该是一个对象。
一条重要的原则就是要记住 mutation 必须是同步函数。
----摘自官网

总结:
1.Mutations是用来改变state数据状态的,这个改变操作是同步的。它是唯一一种可以改变store中数据的方法。
2.mutation注册了事件:修改store状态的函数,然后使用store.commit来触发调用此函数。

4.Action

Action 提交的是 mutation,而不是直接变更状态。
Action 通过 store.dispatch 方法触发:store.dispatch('increment')
increment (context) { context.commit('increment') }
increment ({ commit }) { commit('increment') }
----摘自官网

总结:
1.action 类似于 mutation,但不同在于(1)提交的是mutation,不是直接变更状态;(2)可以包含任意异步操作。
2.actions也是用来改变数据状态的,只不过它是异步的,其实它是利用一个已经存在的mutation来完成的。

原文:
快速理解Vuex




转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/241605.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号