11 VueX 状态/数据管理

1、详解:state存储数据;组件中可直接使用this.$store.state.xxx操作数据,但是会出现代码冗余,使用getters统一操作数据,组件调用即可;事件处理函数若涉及到state数据,我们也可以直接使用,而且由于是引用值,某个组件state改变,其它组件state也会随之改变,但有缺点,1.devtools上调试效果不好,2.store.js中开启严格模式后也会报错,vue中不允许在mutations中函数外操作数据,因此要使用mutations统一操作数据,等同于注册函数,组件触发即可;若遇到异步操作,使用mutations可实现,但调试效果不好,因此建议使用actions处理异步操作,间接触发mutations,从而处理state数据;

2、

Vue组件 -> Dispatch(); -> Actions -> Mutations -> state数据改变 -> render渲染数据 -> 形成闭环

Actions主要处理"异步过程",可省略;Backend API:异步API;Vue组件 -> Mutations -> state数据改变 -> render渲染数据 -> 形成闭环

Mutations可使用Vue Devtools查看;Vue Devtools必须翻墙才能成功下载;

参考网址:https://github.com/vuejs/vue-cli

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

推荐阅读更多精彩内容

  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,154评论 0 6
  • 目录 - 1.什么是vuex? - 2.为什么要使用Vuex? - 3.vuex的核心概念?||如何在组件中去使用...
    我跟你蒋阅读 4,128评论 4 51
  • 目录 组件化 组件通信 状态管理 Vuex 是什么 Vuex 有什么特点 Vuex 解决了什么问题 什么类型的数据...
    前端小华子阅读 2,016评论 0 16
  • 这两天在做Vue移动端的项目,正好用到了Vuex,记录一下相关知识。 一、安装 npm yarn Vuex是Vue...
    婷楼沐熙阅读 7,708评论 2 2
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,691评论 7 61