There are two distinct elements here - a button and a form. By clicking the button, I can trigger an action in Vuex using "$store.dispatch".
addWorkerSubmit: async function () {
...
await this.$store.dispatch('workermanage/addWorkerSubmit', formData)
}
In Vuex, there is a function that sends a backend request to add data into the 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) {
...
}
}
}
However, after inserting new data into the database, the form component does not automatically update with this new data. Only by refreshing the web page does the table reflect the added data.
<Table
border
height="700"
:columns="peopleColumns"
:data="persons"
>
...
</Table>
...mapState({ persons: state => state.workermanage.staff.staff })
Upon checking, I noticed that only the original data appears in "state.workermanage.staff.staff" until the web page is refreshed.
The data stored in "state.workermanage.staff.staff" is acquired through the "nuxtServerInit" function from the database.
actions: {
async nuxtServerInit ({ commit }, { req, app }) {
let { status, data: { code, result } } = await app.$axios.get('/manager/worker_manage/getStaff')
commit('workermanage/setStaff'...
}
What steps should I take to ensure real-time updates for both the data in the table and "state.workermanage.staff.staff"? Thank you!