Как сделать vuex и компоненты с его обновлениями данных в реальном времени

Question

есть два независимых компонента. Кнопка и форма. Я могу "$ store.dispatch" действие для vuex, нажав кнопку

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

в vuex, там есть функция, которая может опубликовать backend-функцию для добавления данных в базу данных

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

но пока новые данные вставляются в базу данных, компонент формы не может перезагрузить эти новые данные. только refre sh веб-страницу, новые данные можно добавить в таблицу

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

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

Я отмечал только исходные данные, но не добавленные новые данные в "state.workermanage.staff.staff "before refre sh веб-страница

Данные, которые в" 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" в режиме реального времени, спасибо

Answer 1

Зафиксировать мутацию "workermanage / addStaff" в действии addWorkerSubmit. Может ли бэкэнд вернуть добавленный персонал? Если так:

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