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

Question

there are two independent components.A button and a form. I can "$store.dispatch" an action to vuex by pressing down the button

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

in vuex,there a function which can post a backend-function to add a data into database

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

but while the new data insert in to database, the form component can not reload this newdata. only refresh the web page, the new data can add into the table

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

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

I checked there Only the original data but no newly added data in "state.workermanage.staff.staff" before refresh web page

The data which in "state.workermanage.staff.staff" were taken by "nuxtServerInit" function from database

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

what should I do can make the data in table and "state.workermanage.staff.staff" real-time updates,thanks

Answer 1

Commit a mutation "workermanage/addStaff" in action addWorkerSubmit. Can backend return added staff? If so:

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

If backend dont return added staff. You can query updated list (same action as nuxtServerInit) or get added staff from formData