组件之间的通信2-->vuex状态管理

在上期,我们讲了父子组件的传递方式,但是,如果我们想知道这些数据从哪里来的话,就需要一层一层找父组件,最后才能找到数据,容易造成Prop 逐级透传问题

今天,我们将介绍另一种组件通信方式,vuex状态管理

一句话介绍就是: vuex就是把公共资源放在一个地方,不同的组件可以去拿到这些资源

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库

后期可能会使用到pinia

使用原理

与父子组件传递方式不同,vuex相当于把后台的数据拿到,放在一个新的组件里,有需要数据的组件到vuex这里来获取

1.state:把数据都放到这里来,公共状态

2.actions(事件):要执行的操作

3.mutations(执行):对数据执行完后,actions通过commit更新state数据源

4..getter(加工):返回一些数据

流程

1.通过dispatch去提交一个actions,

2.actions执行一些同步//异步的操作,根据情况分发给mutations,

3.actions通过commit去触发mutations,

4.mutations去更新state数据，state更新之后，就会通知vue进行渲染

使用步骤

1.下载vuex插件

2.配置index.js

3.在main.js中使用store对象

4.在vue中,通过this.$store访问stiore实例,也可以在计算属性中返回值

 

 使用vuex发送网络请求

例子:发送add事件操作网络数据

  <el-button link type="primary" size="small" @click="add(item.$index)">增加</el-button>import {mapActions } from 'vuex'

1.在根节点注入 store

import {mapActions, mapState,mapGetters } from 'vuex'

2.借助action,使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

    methods: {
        ...mapActions(["add", "del"])
    },

3.action通过context.commit触发mulatation

  //actions 用于响应组件中的事件
    add(context,index){
      context.commit('add',index)
    },  
  },

4.mulatations操作数据

  //mutations 用于操作数据
  mutations:{ 
    add(state,index){
      state.goodsData[index].num++;
    },
  },