[英]How to make vuex and components with his data real-time updates
有兩個獨立的組件。一個按鈕和一個表單。 我可以通過按下按鈕“$store.dispatch”一個動作到 vuex
addWorkerSubmit: async function () {
...
await this.$store.dispatch('workermanage/addWorkerSubmit', formData)
}
在 vuex 中,有一個 function 可以發布一個后端函數來將數據添加到數據庫中
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) {
...
}
}
}
但是當新數據插入數據庫時,表單組件不能重新加載這個新數據。 只刷新web頁面,新數據可以添加到表中
<Table
border
height="700"
:columns="peopleColumns"
:data="persons"
>
...
</Table>
...mapState({ persons: state => state.workermanage.staff.staff })
我在刷新web頁面之前檢查了“state.workermanage.staff.staff”中只有原始數據但沒有新添加的數據
“state.workermanage.staff.staff”中的數據是由“nuxtServerInit”function從數據庫中獲取的
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”實時更新,謝謝
在操作 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 獲取添加的人員
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.