VueX 全局状态管理

1. 安装及简单介绍

Vue2使用3.6.1的vuex npm i vue@3.6.1 -s 或者脚手架安装选择vuex(注意看下配置文件的版本号是不是3.6.1).

vuex就是多了一个公共的js 所有的组件都可访问修改其中存储的变量数值 这样省去组件之间通信的麻烦.

2. 组件通信的方法

  1. 父传子 自定义属性 props
  1. 子传父 自定义事件 emit注册事件on监听事件
  2. 组件间传值 事件总线 eventBus
  3. parents/children 父子组件间 通过修改组件的data
  4. provide/inject 多层嵌套组件间传值
  5. 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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容