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工作流程图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值