如何让vuex和components随他的数据实时更新

Question

有两个独立的components.A按钮和一个表单。我可以通过按下按钮

对 vuex 执行“$store.dispatch”操作

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

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

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

   <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'...
    }

我应该怎么做才能让table和"state.workermanage.staff.staff"的数据实时更新，谢谢

Answer 1

在操作 addWorkerSubmit 中提交变更 "workermanage/addStaff"。后端return可以加人手吗？如果是：

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)
    }
}

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

获取添加的人员

如何让vuex和components随他的数据实时更新

How to make vuex and components with his data real-time updates

javascript

real-time

vue.js

vuex

nuxt.js