Question

我在Vuex商店有很多公司。每个公司对象都有几个对象......为了简化我的问题，想象一下

公司{id：1，approval_notes：[{id：1}，{id：2}，{id：3}]，fins： {total_rev：10000}}

我想从id为1的公司中删除id为2的approval_note。

在视图中，我有

deleteNote(obj) {
                if(confirm('Are you sure you want to delete this note?')) {
                    let path = '/api/approval_notes/' + obj.id;
                    axios.delete(path)
                        .then(function(rsp) {
                            this.$store.dispatch('delete_approval_note', obj);
                        }.bind(this))
                        .catch(function (err) {
                            console.log('AXIOS ERR', err);
                        }.bind(this));
                }
            }

行动是

export const delete_approval_note = ({commit}, payload) => {
    commit('DELETE_APPROVAL_NOTE', payload);
};

突变是

export const DELETE_APPROVAL_NOTE = (state, payload) => {
    _.each(state.companies, function(co) {
        if(co.id = payload.company_id) {
            let notes = co.approval_notes;
            notes.splice(notes.indexOf(payload), 1);
        }
    });
};

该注释将从数据库中删除，但如果没有页面刷新，则视图不会更新。

这种类型的东西我会做很多事情，所以我理解这个过程很重要，因为我显然现在没有理解。

感谢任何帮助。

Answer 1

而不是IndexOf，使用

notes.findIndex(obj => obj.id == payload.id)

使用带有复杂对象的IndexOf时会很棘手，如果处理简单值（整数，字符串，布尔值），我主要依赖indexOf

Vue.js Vuex - 数据库中的删除未反映在视图中

1 个答案: