vuex官网:Vuex 是什么? | Vuex
1. 问题导入
修改一个数据, 多个组件的状态怎么实现同时变化?
我们之前学过props父传子 $emit子传父, 但是如果是兄弟组件间传值呢?
如果用以前的方法, 特别复杂
2. 组件传值的几种方式
和我们已经学过的父子通信和兄弟通信类似,vuex也是一种组件通信解决方案
3. Vuex的作用
① 解决多组件状态共享的问题,在大型的项目中,组件通讯会变得很混乱,使用vuex可以统一管理组件之间的通讯
- 它是独立于组件单独存在的, 所有的组件都可以把它当作一座桥梁来进行通讯
② 使用vuex好处
响应式
: 只要vuex中的数据变化,对应的组件会自动更新(类似于vue数据驱动)- 操作更简洁 : 类似于sessionStorage,只有几个方法
4. Vuex使用场景
vuex就像近视眼镜,你会自然而然的知道在什么时候使用它
- 1.不是所有的场景都适用于vuex,只有在必要的时候才使用vuex,如果
不必要,尽量别用
-
- 使用了vuex之后,会一定程度上增加了项目的复杂度
- 2.适合使用vuex场景
-
- 这个数据需要在
很多个地方使用
,如果采用组件传值方式,写起来很麻烦,而且多个地方都要写
- 这个数据需要在
-
-
- 例如:用户信息(姓名,头像),可能会在很多个地方使用(个人页面,评论页面等)
-
- 3.不适合使用vuex场景
-
- 这个数据
不需要多个地方使用
,如果某个数据仅仅只是在两个组件之间通讯
,优先使用props或$emit
- 这个数据
- 4.vuex特点
-
- (1)所有组件数据共享
- (2)响应式: 一旦vuex数据修改,所有使用的地方都会同步自动更新
5. vuex使用流程
使用步骤:
1.vue-cli
中整合(如果创建脚手架勾选了vuex,就不需要以下步骤,会自动帮我们完成配置)
vue add vuex
如果提示,选择y
main.js
导入store并挂载到Vue
实例上
创建/src/store/index.js
state
中定义数据
2. 任意组件中
this.$store.state.xxx
即可取值
template
中可以不用写this
可以通过计算属性简化编码 下面讲到的辅助函数还可以省略写计算属性的步骤
3. js
文件中 导入store
对象即可获取属性
6. vuex的配置项
① 总共有5项:
- state (数据存储, 响应式更新)
- getters (state的计算属性, 处理一些state的计算, 解决语法冗余, 带缓存)
- mutations (更新state的唯一方法, 并且会被vuetools实时跟踪)
- actions (异步获取数据, 提交mutations更新state)
- modules (模块化管理vuex数据)
② vuex有三种语法
- 原始语法(语法长) : 不需要任何导入的,任何情况可以直接使用的
- 辅助函数写法(语法简洁) : 需要导入辅助函数
- 模块语法 : 原始语法 + 辅助函数写法
③ 所有辅助函数使用都一定需要从vuex导入函数
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
④ payload只能是一个, 如果你需要传多个数据,就应该使用对象
6.1 state 状态
state作用: 存储数据
State提供唯一的公共数据源,所有共享的数据都要统一放到Store中的State中存储。
① 原始语法
这里可以用计算属性return this.$store.state.userInfo 但是计算属性如果一多写起来也很麻烦
所以下面介绍辅助函数
② 辅助函数 mapState
记得import
官网文档:vuex辅助函数-mapState
- mapState作用: 将vuex中的数据映射到组件的计算属性中
- mapState语法
- 在要使用的组件中导入mapState辅助函数:
import { mapState } from 'vuex'
- 在这个组件的computeds中来映射计算属性
6.2 getters 派生状态
- getters作用: state的计算属性
① 原始语法
用法: 参数记得一定是state
② 辅助函数 mapGetters
记得import
mapGetters作用: 自动帮我们把getters中的数据生成"computed"
6.3 mutations 同步更新state数据
state数据的修改只能通过mutations,并且mutations必须是同步的
Mutations是更新state数据的唯一方式
Mutations作用:更新state中的数据
- 疑问?: 既然可以直接通过
this.$store.state
来修改,为什么不能这么写呢? - 原因: 在组件中直接state,我们的
vue tools
不会追踪数据的修改,这样不便于维护(不知道这个全局数据什么时候被修改了,再加上vuex是全局响应式的,一旦修改所有使用的地方全部修改。非常不便于维护)
-
- 另外:在严格模式下,直接修改state会报错
-
-
- 开启严格模式:给vuex实例对象添加属性 strict: true
-
① 原始语法
注册
调用 通过vue实例的事件调用vuex实例commit内置方法触发mutations同名方法,传递payload
② 辅助函数 mapMutations
记得先import方法
调用 实际理解就是处理参数, 生成格式化的同名参数的函数, 然后平铺到methods中,然后通过vue实例的其他事件执行这个函数,触发mutations同名方法并传递payload
6.4 Actions异步更新state数据
- 1.actions与mutations相同点 :都是修改state数据
- 2.actions与mutations不同点
-
- mutations:同步更新
- actions: 异步更新(例如你的数据来源于ajax)
- actions最终还是将异步获取到的数据提交给mutations更新
① 原始语法
注册 actions根据payload(也可以是无)获取数据然后提交给mutations更新数据
调用 通过vue实例的事件调用vuex实例dispatch方法触发actions同名方法,并传递payload
② 辅助函数 mapActions
调用 和上面原理差不多 记得先import方法