在现代 Web 开发复杂多变的需求驱动之下,组件化开发已然成为了事实上的标准。
然而大多数场景下的组件都并不是独立存在的,而是相互协作共同构成了一个复杂的业务功能。 组件间的通信成为了必不可少的开发需求
Vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex是采用集中式管理组件依赖的共享数据的一个工具, 可以解决不同组件数据共享的问题
使用Vuex
概念一 state
state是放置所有公共状态的属性,如果你有一个公共状态数据 , 你只需要定义在 state对象中 组件中可以使用 this.$store 获取到vuex中的store对象实例,可通过state属性属性获取count, 如下
简化
概念二 mutations
state数据的修改只能通过mutations,并且mutations必须是同步更新,目的是形成数据快照
使用
简化
概念三 actions
state是存放数据的,mutations是同步更新数据,actions则负责进行异步操作
使用
简化
概念四 getters
除了state之外,有时我们还需要从state中派生出一些状态,这些状态是依赖state的,此时会用到getters
使用
简化
概念五 module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象 state 当中。当应用变得非常复杂时,就有可能变得相当臃肿。Vuex会变得越来越难以维护, 由此,又有了Vuex的模块化
使用
默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应 这句话的意思是 刚才的user模块还是setting模块,它的 action、mutation 和 getter 其实并没有区分,都可以直接通过全局的方式调用 高封闭性?可以理解成 一家人如果分家了,此时,你的爸妈可以随意的进出分给你的小家,你觉得自己没什么隐私了,我们可以给自己的房门加一道锁(命名空间 namespaced),你的父母再也不能进出你的小家了