Vuex快速入门

一枚攻城狮
302 阅读3分钟

学习Vuex的时候可以对照着官方的文档:vuex.vuejs.org/zh/ 来看看官网对Vuex的介绍:

Snipaste_2023-01-09_16-49-07.png 使用之前要先安装:npm install vuex@next --save

为什么要有Vuex

  • 1.vuex的作用是解决多组件状态共享的问题，在大型的项目中，组件通讯会变得很混乱，使用vuex可以统一管理组件之间的通讯

    • 它是独立于组件而单独存在的，所有的组件都可以把它当作一座桥梁来进行通讯。

  • 2.使用vuex好处

    • 响应式 ： 只要vuex中的数据变化，对应的组件会自动更新(类似于vue数据驱动)
    • 操作更简洁 ： 类似于sessionStorage，只有几个方法

Vuex使用场景

  • 1.不是所有的场景都适用于vuex，只有在必要的时候才使用vuex,如果不必要，尽量别用

    • 使用了vuex之后，会一定程度上增加了项目的复杂度

  • 2.适合使用vuex场景

    • 这个数据需要在很多个地方使用，如果采用组件传值方式，写起来很麻烦，而且多个地方都要写

      • 例如：用户信息（姓名，头像），可能会在很多个地方使用（个人页面，评论页面等）

  • 3.不适合使用vuex场景

    • 这个数据不需要多个地方使用,如果某个数据仅仅只是在两个组件之间通讯,优先使用props或$emit

  • 4.vuex特点

    • （1）所有组件数据共享
    • （2）响应式： 一旦vuex数据修改，所有使用的地方都会自动更新

Vuex核心概念 (1)：state状态

  • state作用： 存储数据

    • State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。

state辅助函数-mapSatate

  • 1.mapState作用： 将vuex中的数据映射到组件的计算属性中

    • 我们在组件中访问vuex数据，需要通过this.$store.state.属性名，单词太常，写起来很麻烦。

      • 还记得吗？ 当模板内的语法比较冗余的时候，就可以考虑使用计算属性进行简化

    • 通过mapState函数，可以在组件中直接通过this.属性名来访问vuex中的数据

  • 2.mapState语法

  • 2.1 在要使用的组件中导入mapState辅助函数： import { mapState } from 'vuex'

  • 2.2 在这个组件的computeds中来映射计算属性

// 导入mapState辅助函数
import { mapState } from 'vuex'

export default {
  name: 'home-page',
  computed: {
    // mapState作用：自动帮你生成计算属性 (和下面代码做的事情一样)
    ...mapState(['userInfo', 'settingInfo', 'count'])
    // 计算属性：本质还是访问vuex中的数据
    // userInfo () {
    //   return this.$store.state.userInfo
    // },
    // settingInfo () {
    //   return this.$store.state.settingInfo
    // },
    // count () {
    //   return this.$store.state.count
    // }
  }
}
</script>

Vuex核心概念 (2): getters派生状态

  • getters作用： state的计算属性

  • getters语法

    • 声明

      • new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    计算属性名: function(state) {
      return 要返回的值
    }
  }
})

    • 使用

      • $store.getters.getter的名字

Vuex核心概念 (3)：Mutations同步更新state数据

state数据的修改只能通过mutations，并且mutations必须是同步的

Mutations是更新state数据的唯一方式！！！

  • Mutations作用：更新state中的数据

    • 疑问？： 既然可以直接通过this.$store.state来修改，为什么不能这么写呢？

    • 原因： 在组件中直接state，我们的vue tools不会追踪数据的修改，这样不便于维护（不知道这个全局数据什么时候被修改了，再加上vuex是全局响应式的，一旦修改所有使用的地方全部修改。非常不便于维护）

      • 另外：在严格模式下，直接修改state会报错

      • 开启严格模式：给vuex实例对象添加属性 strict: true

Vuex核心概念 (4): Actions异步更新state数据

  • 1.actions与mutations相同点 ：都是修改state数据

  • 2.actions与mutations不同点

    • mutations：同步更新
    • actions: 异步更新（例如你的数据来源于ajax）

为什么要有actions, 假如你有一个数据，需要通过ajax请求来获取。然后你想存入vuex，应该怎么做？

方案一：

1.在组件的created钩子中发送ajax请求

2.服务器响应数据之后，调用$store.commit()提交给mutations更新（手动挡）

方案二：

1.直接在actions中发送ajax请求

2.actions会自动帮你把数据提交到mutations更新（自动挡）

你会选择手动更新？还是自动更新呢？

一定要记住：只有你的ajax数据需要存入vuex，才需要在actions中发送ajax请求。 如果不想存入vuex，还是在组件的created钩子中发送。（vuex说：你又不用我，你想干啥与我何干？）

Vuex核心概念 (5)-modules

  • modules作用：模块化处理vuex数据

为什么要有modules? 假设你的项目非常的复杂，分为四个大模块：首页、个人中心、设置中心、购物车

每一个模块有10个数据需要使用vuex，那么你的vuex的state中就需要声明40个属性。（是不是非常麻烦呢？）

  • 当vuex中需要存储的数据很多的时候，就需要使用moudles进行模块化处理

    • 一般实际开发中moudles使用不多哈。 只有那种特别复杂，庞大的项目才可能用到

分析一个常见面试题:

vuex的触发流程是什么?

  • 点击按钮的时候，通过dispatch触发actions，actions中发请求，请求的结果到达之后，通过commit触发mutations，来修改state。而state中的数据是响应式的，所以凡是用到state数据的组件都会自动更新。
avatar
文章
阅读
粉丝