快速理解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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 7,988评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 8,298评论 0 6
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 5,316评论 0 7
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 12,440评论 4 111
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 10,100评论 7 61