首页 文章

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

提问于
浏览 次
0

在我的Vue应用程序中，我有一个编辑记录的视图 . 从该组件我（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' })
        }
    }
}
vue.js vuejs2 vue-router vuex

1 回答

  • 2

    在变异中，而不是做：

    state.records[i] = record;

    尝试以下：

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

    Why ：

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

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

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

    要么

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

相关问题