组件的关系:
父子关系:父传子:自定义属性 props; 子传父:自定义事件 $emit
非父子关系:vuex (一种组件通信方案 )
Vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理数据,以相应的规则保证状态以一种可预测的方式发生变化.
学习Vuex的意义?
①不同组件数据保持同步;
②数据的修改都是可追踪。方便集中管理
vuex中存什么?
多个组件共享状态,才存储在vuex中,某个组件中的私有数据,依旧存储在data中(多个组件共享的值)
配置项?
各配置参数及含义注意点
基本使用:
无模块无命名空间
都是分别定义在store实例对象中
1、state:两种使用方法
①直接使用:this.$store.state.变量名 直接用插值表达式在组件中使用
直接使用
②映射使用:
在使用的组件中引入辅助函数 import {mapState} from 'vuex'
在组件的 computed 计算属性中 通过 ...mapState ([ ' 变量名' ]) 展开
之后可以直接 {{ 变量名 }} 进行使用
影射使用
2、mutations :两种方法
与state同理
①直接使用:
配合commit使用
②影射使用:
导入 mapMutation 函数
通过 ...mapMutations 将index.js中的函数展开到组件 的 methods 中,然后 可在created函数中通过 this.函数名() 调用
映射
下图中setCount 是在index.js中 使用mutation 定义的函数,内容是对state中的变量进行的更改操作。
展开后可进行的操作示例