1. 安装及简单介绍
Vue2使用3.6.1的vuex npm i vue@3.6.1 -s 或者脚手架安装选择vuex(注意看下配置文件的版本号是不是3.6.1).
vuex就是多了一个公共的js 所有的组件都可访问修改其中存储的变量数值 这样省去组件之间通信的麻烦.
2. 组件通信的方法
- 父传子 自定义属性 props
- 子传父 自定义事件
on监听事件
- 组件间传值 事件总线 eventBus
-
children 父子组件间 通过修改组件的data
- provide/inject 多层嵌套组件间传值
- vuex 全局状态管理
3. vuex五个属性
image.png
4. vuex映射方法
上面mutatuons等其他属性 在组件内都有自己的调用方式.
如state读取数据.
$store.state.数据名
mutations调用函数.
this.store.commit('函数名')
映射将这些调用函数的方法和读取数据的方式做了简化 通过映射的方式.
从vuex引入四种属性的映射
image.png
在组件方法中把vuex文件里的方法直接映射出来 组件可以直接使用.
image.png
mutations和actions映射后语法 直接调用映射出来的函数名.
image.png
state读取数据和getter计算属性映射后读取方法.
image.png
5. provide inject父传子
使用provide设置要传递的变量值后 父组件下的所有子组件 子组件的子组件都可以直接inject获得传递的变量值.
image.png
image.png
