我这里用的是vue，react同理

state改变会触发页面数据更新

首先在页面组件中，传入mapActions

methods下： ...mapActions([ 'deleteDevices']),
点击按钮方法下： this.deleteDevices({ _id: val._id })
将id传入到actions中，做异步请求
vuex的store相应module下
deleteDevices({}, id) {
      return new Promise((resolve, reject) => {
        Api.deleteDevices(id)//将id传入后端，后端删除该条数据
          .then(() => resolve())
          .catch(err => reject(err))
      })
    }
删除后这时候，数据库中的数据虽然刷新了，但是前台页面并不会刷新
原因：state中的数据并没有发生改变，这时候有2种做法
  • 1.在前端发送id到后端，然后在回调函数（在vuex的store）中拿到后端传过来到数据库数据，然后前端使用commit触发mutations中到对应函数继而改变state中数据

这样做的好处是前端不用再请求一次获取数据到接口，缺点是，后端在删除后要对数据全部返回

  • 2.发送id到后端，不用在删除的回调函数，而是在组件调用vuex中actions的方法的回调函数中（在删除函数的回调中），再请求一次获取全部数据的接口

这样做的好处是，后端不用再返回一次全部数据，因为页面初始化的时候前端钩子函数会请求一次获取全部信息的接口，当做增删改后，只要再调用一次这个接口，获取全部信息就可以了。

  • 3.删除的同时传入index，然后再定义一个删除state的mutations

赏

爬。