Tips on Vuex 2.0

  • mutations / actions 可以用对象的方式进行分发,可以使用对象展开运算符( ES2017 stage-3 )进行深拷贝。

  • 在 actions 里使用 Promise 或者 async/await 有奇效

  • dispatch 的过程是异步执行的,所以如果界面渲染依赖于 Vuex Store 的内容的话,尽可能使用 computed 获取 state ,在 state 从初始值变为非初始值时,再开始执行渲染(通过 v-if 控制)。这样可以保证在数据更新的时候,能够正确触发视图更新。

  • 一些小提示:不要把所有的信息都放到 Vuex 中,可以效仿 React,遵循瀑布原则:放在组件内的数据总是单向传递的,即父组件会向子组件传递数据,而子组件不关心数据来源,也无法回溯。在这个原则下,涉及到跨组件的数据共享时,再使用 Vuex。同时,使用了 Vuex 的项目同样可以使用 Vue Bus 来管理局部共享的数据,这样可以简化 Vuex 的数据复杂度。

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

推荐阅读更多精彩内容

  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,051评论 4 111
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,972评论 0 7
  • 上一章总结了 Vuex 的框架原理,这一章我们将从 Vuex 的入口文件开始,分步骤阅读和解析源码。由于 Vuex...
    你的肖同学阅读 1,826评论 3 16
  • 写了一个基于 Vue 1 和 iView 的前端项目,用 Vuex 做了状态管理,分享一下 Vuex 比较重要的知...
    云之外阅读 448评论 0 0
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 1,479评论 0 7