[英]How to make vuex and components with his data real-time updates
there are two independent components.A button and a form.有两个独立的组件。一个按钮和一个表单。 I can "$store.dispatch" an action to vuex by pressing down the button
我可以通过按下按钮“$store.dispatch”一个动作到 vuex
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在 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) {
...
}
}
}
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
只刷新web页面,新数据可以添加到表中
<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我在刷新web页面之前检查了“state.workermanage.staff.staff”中只有原始数据但没有新添加的数据
The data which in "state.workermanage.staff.staff" were taken by "nuxtServerInit" function from database “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'...
}
what should I do can make the data in table and "state.workermanage.staff.staff" real-time updates,thanks我该怎么做才能使表中的数据和“state.workermanage.staff.staff”实时更新,谢谢
Commit a mutation "workermanage/addStaff" in action addWorkerSubmit.在操作 addWorkerSubmit 中提交突变“workermanage/addStaff”。 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
您可以查询更新的列表(与 nuxtServerInit 相同的操作)或从 formData 获取添加的人员
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.