Vue全家桶之vuex

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项:

1. state (数据存储, 响应式更新)
2. getters (state的计算属性, 处理一些state的计算, 解决语法冗余, 带缓存)
3. mutations (更新state的唯一方法, 并且会被vuetools实时跟踪)
4. actions (异步获取数据, 提交mutations更新state)
5. 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

1. mapState作用： 将vuex中的数据映射到组件的计算属性中
2. 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方法

Vuex工作流程图