一、Vuex简介
作用:在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。
什么时候用Vuex?
- 多个组件依赖于同一状态
- 来自不同组件的行为需要变更同一状态
总结一句话:多个组件需要共享数据时需要用Vuex。
Vuex工作原理:
二、搭建Vuex环境
安装:npm install vuex@3
(如果不指定版本,就会默认安装最新版本vuex@4,而vuex@4对应的是Vue3,vuex@3对应的是Vue2)
2.1. 创建Store
创建Store文件:src/store/index.js
。
1 | // 引入Vue核心库 |
2.2. 绑定Store
在main.js
中创建vm时引入store
配置项
1 | import store from './store' |
2.3. 基本使用
定义组件并在组件中使用Store:
1 | <template> |
store/index.js
中定义Store配置:
1 | const state = { |
2.4. 高级使用
如果在Vuex的state中有很多属性都需要在组件中使用,那么就会出现大量的$store.state.xxx
代码,再加上Vue官方不建议在模板字符串中使用点语法,所以我们可以尝试把这些代码使用计算属性代替。
1 | <template> |
上面代码虽然规范了,但在计算属性中还是出现了重复的this.$store.state/getters.***
。其实Vuex提供了一系列map函数,可以映射Store中的属性或函数。
1 | import {mapState, mapGetters} from 'vuex' |
mapState
:用于帮助我们映射state
中的数据为计算属性
mapGetters
:用于帮助我们映射getters
中的数据为计算属性
mapActions
:用于帮助我们生成与actions
对话的方法,即包含$store.dispatch(xxx)
的函数
mapMutations
:用于帮助我们生成与mutations
对话的方法,即包含$store.commit(xxx)
的函数
2.5. 模块化
实际开发中,我们会按照功能对Store配置项进行拆分,否则会太臃肿,并且不利于团队开发。
模块化和命名空间能够让代码更好维护,让多种数据分类更加明确。
在store/index.js
中:
1 | // 引入Vue核心库 |
如果使用modules配置了Store的模块,一定要在配置项中加上namespaced: true
,否则在使用map函数时,会出现找不到模块而报错。
开启命名空间后,组件中使用store:
1 | // state |