Question

在我的Vue应用程序中，我有一个编辑记录的视图。从该组件I＆＃39; m（1）调用vuex操作以将记录持久化到数据库，以及（2）调用$router.push()以导航回到概览视图。 vuex操作将使用AJAX保留记录，然后将返回的记录推送（替换或追加）到商店中的概述列表。问题是在我进行手动导航之前，更改不会显示在概览视图中。

vuex / store.js：

import Vue from 'vue'
import Vuex from 'vuex'
import $ from 'jquery'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        records: [],
        activeRecord: {}
    },
    mutations: {
        pushRecord: function(state, record) {
            var added = false;
            for (var i = 0; i < state.records.length; i++) {
                if (state.records[i]._id == record._id) {
                    state.records[i] = record;
                    added = true;
                    break;
                }
            }
            if (!added) {
                state.records.push(record);
            }
        }
    },
    actions: {
        saveRecord({ commit, state }) {
            $.ajax({
                type: "POST",
                url: "http://127.0.0.1:8080/record",
                data: JSON.stringify(state.activeRecord),
                dataType: "json",
                contentType: "application/json"
            }).done(function(data) {
                commit("pushRecord", data)
            });
        }
    }
})

RecordDetail.vue（注意后续调度和导航）：

export default {
    name: "record-detail",
    computed: {
        record() {
            return this.$store.state.activeRecord
        }
    },
    methods: {
        save: function() {
            this.$store.dispatch("saveRecord")
            this.$router.push({ path: '/records' })
        }
    }
}

Answer 1

在变异中，而不是做：

state.records[i] = record;

尝试以下：

Vue.set(state.records, i, Object.assign({}, record))

<强>为什么：

由于JavaScript中的限制，Vue can't detect当您直接使用索引设置项目时，例如vm.items[indexOfItem] = newValue

您可以执行以下操作之一来克服此问题：

state.records.splice(i, 1, record)

或

Vue.set(state.records, i, Object.assign({}, record))

Vue.js / vuex UI未在程序化导航上更新

1 个答案: