Skip to content

Latest commit

 

History

History
37 lines (23 loc) · 1.61 KB

vuex使用杂记.md

File metadata and controls

37 lines (23 loc) · 1.61 KB

vuex使用杂记

vuex官方文档和大多数教程主要是罗列了一些特性和api,针对的也是一些非常简单的场景。
这不能满足稍微复杂一点的场景。
本文希望在两个方面做一点记录:

  • api 的扩展说明和取舍 (本人的取舍,正在通过几个不同类型的项目进行验证)
  • 中等复杂场景的最佳实践

api 的扩展说明和取舍

在什么情况下划分module?

在绝大部分情况应该进行划分。由于数据天然容易划分为模型和分组,划分module后,数据所属更加清晰。

module的namespaced是否设置为true?

在程序没有超过中等规模的情况下,不需要设置namespaced为true,因为namespaced造成的使用麻烦比较多。
大多数情况下,通过命名规范就可以避免冲突了。

mutation和action的区别

mutation用来同步修改store。
action可以通过api取数据,然后再调用mutation,然后再做其它操作。

中等复杂场景的最佳实践

form表单的数据存放在data中,还是store中?

一般的数据存在data中能满足需求的话,就存放在data中。
如果表单可能跨页,那么可以通过 vuex-map-fields (two-way data binding ) 来简化表单数据的存取。
注意:使用 vuex-map-fields 是违反设计原则的,应该避免在非表单场合使用。

什么时候将数据存放到store中?

当数据被多个component共享时!
比如增删改查在同一个页面时,数据就可以都放在data中,但增删改查是单独的页面时,很多数据就应该放到store中共享了。