Vuex

通信组件的类型

父子通信
跨级通信
兄弟通信
路由视图级别通信

通信解决方案

1.props/$emit(父子通信)

2.$refs/ref(父子通信)

父级Home.vue

子级Hello.vue

3.$ children /$parent (父子通信)

父 Home.vue

子 Hello.vue

4.$attrs/ $listeners(父子通信,跨级通信)

父 Home.vue

子 Hello.vue
 未使用props接收父级传递的数据,且通过v-bind:="$attrs"向World.vue中传递
 如果子级使用props接收了数据,无法向下继续传递

孙 World.vue

5.provide/inject(父子通信,跨界通信)

父 Home.vue
 父级通过provide来设置属性名和属性值

子 Hello.vue
 跨级时通过inject(数组)来接收,使用时和data中的数据相同

孙 World.vue
 孙级通过inject(数组)来接收,使用时和data中的数据相同

6.eventBus(父子通信、跨级通信、兄弟通信)

在src中新建一个eventBus.js文件

父 Home.vue

子 Hello.vue
子 Hello.vue的同级Brother.vue
 通过import引入eventBus,使用$on来监听事件

孙 World.vue
 通过import引入eventBus,通过$emit来自定义事件

Vuex

 安装：npm i vuex或yarn add vuex
 引入：单文件引入：<script src="vuex.js"></script>
          vuex 会自动安装(也就是主动调用 Vue.use(Vuex)）
    import引入：import Vuex from 'vuex'手动安装Vue.use(Vuex)
 创建store,必须在手动安装之后创建

state

获取数据的方式：任意组件中this.$store.state

也可以直接在模板中使用

state的辅助函数mapState

 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余
 我们可以使用 mapState 辅助函数帮助我们生成计算属性,通常我们把 store 的 state 通过 mapState 函数映射到组件的 computed 上
 引入：import {mapState} from 'vuex'
 使用：1.数组方式
    2.对象方式结合拓展运算符,
    通过对象扩展运算符，可以把 mapState 返回的 state 属性与组件已有计算属性进行融合

getters

 有时候我们需要从store中的state中派生出一些状态
 getters相对于state类似于组件中computed相对于data
 getters与组件属性一样，通过定义一个函数的形式来返回派生数据(数据出门前的一道加工)
 getters 函数接受两个参数,第一个参数为state对象，第二个参数为getters对象
 默认是通过属性的方式去访问 getters 中的数据的，这种方式与组件的计算属性一样，也是会缓存结果的
 我们还可以通过闭包函数的形式返回一个函数，来实现给 getters 函数传参，需要注意的是这种方式不支持结果缓存
属性方式


函数方式

 排序时会对原数据进行操作,需要对数据进行解构赋值

getters的辅助函数mapGetters

 与 mapState 函数类似，通常映射到组件的 computed 上

mutations

 mutations是直接操作数据源唯一的地方
 只能处理同步操作,无法拿到异步处理结果(源码中没有异步的机制),会把异步当作同步处理
 对state中数据的操作：添加,修改,删除按照js的操作方式即可
 提交：通过commit提交操作到mutations对应的方法中,commit方法没有返回值
    commit方法：参数1：方法名；参数2：所需的参数(mutation 的 载荷)

 接收：mutations方法会自动接收两个参数
    参数1：state,当前vue实例的仓库
    参数2：通过commit方法从外部传入的参数

mutations的辅助函数mapMutations

 mapMutations 函数的使用与 mapState 和 mapGetters 类似
 通常把methods映射为store的mutations的commit的调用

Actions

 Action 类似于 mutation,但是Action提交的是mutation,Action 可以包含任意异步操作
 action任务通过dispatch方法来提交,类似于commit,该方法有返回值,且一定返回一个promise对象
 dispatch使用和commit相同
 参数1：方法名；参数2：所需的参数
 dispatch可以触发action 的处理函数返回的 Promise,并且仍然返回一个promise

 actions中的方法，第一参数默认为store

actions的辅助函数mapActions
 与 mapMutations 函数类似，把组件的 methods 映射为 store 的 actions 的 dispatch 调用