Question

从总体上讲，父Vue包含一个记录表和一个用于添加新记录的模式。模态向父级发出回调，该父级调用带有新记录的映射动作。该操作将发布新记录，并提交newRecord突变。 newRecord突变将新记录添加到状态记录数组。

根据我的阅读，您必须以某种方式更新状态数组以进行反应，这已经完成。但是我仍然没有看到表格更新。

父项

<v-data-table 
      :headers="headers" 
      :items="allRecords" 
      :items-per-page="5" 
      class="elevation-1">
...
</v-data-table>
...
computed: mapGetters(["allRecords"]),
...
methods: {
...mapActions(["getRecords", "addRecord"]),
...
created() {
    this.getRecordss();
}

记录模块*

import axios from 'axios';

const getters = {
    allRecords: state => state.records
}

const state = {
    records: []
}

const actions = {
    async getRecords({commit}){
        const response = await axios.get('/api/records')
        commit('setRecords', response.data)
    },
    async addRecord({ commit }, record) {
        const response = await axios.post('/api/records', record)
            .catch(err => console.log(err))
        commit('addRecord', response.data)
    }
}

const mutations = {
    setRecords: (state, records) => (state.records = records),
    addRecord: (state, record) => ([...state.records, record])
}

export default {
    state,
    getters,
    actions,
    mutations
}

所有内容均适用于帖子，刷新页面会显示新记录，但不会进行被动更新。

Answer 1

使用Chrome Vue调试插件，我发现上述突变实际上并未将新记录添加到stores数组中。修改下面的addRecord突变可解决此问题。显然，散布运算符的使用不正确。

addRecord: (state, record) => ([...state.records, record])

到

addUser(state, user){
    state.users.push(user);
}

Vuex状态更改未更新Vuetify表

1 个答案: