Vuex的介绍和使用
本文按照Vuex官网参考编写,写的是自己对其的理解,当然官网已经写的很好了,只是有些东西还是不太好理解,希望用自己的话解释一遍
Vue的单向数据流
单向数据流:在每个Vue的实例里,(数据源) State => (数据源更新触发视图更新) view => (用户操作视图) Actions => (操作行为改变对应数据源) State
什么是Vuex
由于Vue的单项数据流在处理实例之间的通信比较复杂,比如多个组件依赖同一状态时,当某一个组件状态改变时关联的多个组件对应状态应该一起改变,即使可以通过状态提升带父级组件,也会因为层层嵌套难以管理,导致不便于维护。因此需要一个专门为Vue设计的一个单例状态管理模式
这个模式就是Vuex,它采用集中式管理所有组件的状态,解决了上述问题
Vuex的简单版
对于上面说的问题,Vuex是可以完成,但是需要在编写代码的时候为了考虑各种问题,会将项目复杂化,因此我们需要考虑项目是否真的需要Vuex进行管理,因为它实在做了很多事情
如果不需要,那我们实现一个简易版的Vuex
其实原理就是共享数据源,绑定在需要共享的组件上,如果需要记录行为方便调试,可以尝试抽离出其行为即Actions,封装成一个对象,行为即方法
现在真正聊 Vuex
Vuex真的很简单:几个核心概念
- State 数据源
- Getters 数据源的派生状态
- Mutations 突变
- Actions 行为
- Modules 模块
你可以这么理解它们
-
作为一个状态管理模式,肯定需要状态,那就是State 数据源
-
虽然可以从数据源获取到数据,但是如果即要保留源数据,有需要处理之后的数据,Getters就可以满足需求,比如列表排序(各种排序方式)、当前页面列表检索(数据过滤)
-
要更新数据源必须要相应的操作,这些操作叫 Mutations 突变,它被希望异步更新state,这样无法追踪行为
-
但是有的时候需要异步的更新数据源,但是又不希望将这种更新耦合在Vue组件中,于是出现了中间更新层Actions,它的存在就是为了解决异步的触发Mutations,并且要注意每个Action返回的值最后都会给store.dispatch,如果actions返回的是Promise,那么可以像组合Promise一样组合Action
-
最后一个概念看文档可能比较蒙:Module
其实从这个单词就差不多可以理解它为,将state数据源“分块”,就像前端路由一样,不希望所以路由都在一个根路由下,而是多级路由。Vuex同样是这样,一个应用可能有多种状态,比如一个项目有全局配置状态管理、用户登录状态管理、页面数据缓存管理,就需要分割开各种状态,并且拥有自己的行为
vuex = { state: {}, getters: {} mutations: {}, actions: {}, modules: { config: { state: {}, getters: {} mutations: {}, actions: {}, }, user: { state: {}, getters: {} mutations: {}, actions: {}, }, data: { state: {}, getters: {} mutations: {}, actions: {}, } } }
至于namespace只是为了方便,给Vuex的一个选择的余地,如果真的在开发中,为了可维护性,最好加上namespace: true
Vuex的进阶
列举一下常用的
1. map+…
只是为了方便在组件中对vuex的获取方便,多看几遍用一用就回了(如果你对ES6语法熟悉,看一下就好)
2. 表单处理
存在一些情况,v-model绑定的属性是vuex的state的,那么在计算属性中,可以使用计算属性的get和set解决这一问题