Vue项目 2021-7-5

Vue项目 2021-7-5

事件总线

main.js

import Vue from 'vue'
Vue.prototype.$bus = new Vue()

this.$bus.$emit("itemInfo",this.itemInfo)

this.$bus.$on("itemInfo")

3.2 State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储

3.3 Mutations

Mutation用于变更Store中的数据

可以集中监控所有数据的变化

mutations中不能执行异步操作

3.4 Action

Action用于执行异步任务

如果通过异步操作变更数据，必须通过Action。而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据

actions:{
  addAsyc(context){
    setTimeout(()=>{
      context.commit('add')
    },1000)
  }
}

addAsync() {
  this.$store.dispatch('addAsyc')
}

3.5 Getter

Getter用于对Store中的数据进行加工处理形成新的数据

1.Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性

2.Store中数据发生变化，Getter的数据也会跟着变化