如何用他的数据实时更新vuex和组件答案

【问题标题】：How to make vuex and components with his data real-time updates如何用他的数据实时更新vuex和组件
【发布时间】：2020-04-13 15:04:37
【问题描述】：

有两个独立的组件。一个按钮和一个表单。我可以通过按下按钮“$store.dispatch”一个动作到 vuex

addWorkerSubmit: async function () {
      ...
      await this.$store.dispatch('workermanage/addWorkerSubmit', formData)
    }

在 vuex 中，有一个函数可以发布一个后端函数来将数据添加到数据库中

const actions = {
  ...
  async addWorkerSubmit ({ commit }, formData) {
    let { status, data: { code, msg } } = await axios.post(`/manager/worker_manage/addStaff`, formData, {
      headers: { 'content-type': 'multipart/form-data' }
    })
    if (status === 200 & code === 0) {
      ...
    }
  }
}

但是当新数据插入数据库时，表单组件不能重新加载这个新数据。只需刷新网页，新数据即可添加到表格中

   <Table
        border
        height="700"
        :columns="peopleColumns"
        :data="persons"
      >
        ...
   </Table>

...mapState({ persons: state => state.workermanage.staff.staff })

我在刷新网页之前检查了“state.workermanage.staff.staff”中只有原始数据但没有新添加的数据

“state.workermanage.staff.staff”中的数据是由“nuxtServerInit”函数从数据库中获取的

actions: {
      async nuxtServerInit ({ commit }, { req, app }) {
        let { status, data: { code, result } } = await app.$axios.get('/manager/worker_manage/getStaff')
        commit('workermanage/setStaff'...
    }

我该怎么做才能让表中的数据和“state.workermanage.staff.staff”实时更新，谢谢

【问题讨论】：

尝试通过将其打印到控制台来查看您是否在突变中接收到正确的数据。

标签： javascript vue.js vuex real-time nuxt.js

【解决方案1】：

在 addWorkerSubmit 操作中提交突变“workermanage/addStaff”。后端可以退回增加的人员吗？如果是这样：

const actions = {
  ...
  async addWorkerSubmit ({ commit }, formData) {
    let { status, data: { code, msg, staff } } = await axios.post(`/manager/worker_manage/addStaff`, formData, {
      headers: { 'content-type': 'multipart/form-data' }
    })
    if (status === 200 & code === 0) {
      commit('workermanage/addStaff', staff)
    }
  }
}

const mutations = {
    addStaff(state, payload) {
        state.staffs.push(payload)
    }
}

如果后端不返回添加的人员。您可以查询更新列表（与 nuxtServerInit 相同的操作）或从 formData 获取添加的人员

【讨论】：