Vue.js/vuex UI aktualisiert keine programmatische Navigation

Question

In meiner Vue-Anwendung habe ich eine Ansicht zum Bearbeiten eines Datensatzes. Von dieser Komponente aus (1) rufe ich eine vuex-Aktion auf, um den Datensatz in der Datenbank zu belassen, und (2) rufe auf, um zurück zur Übersichtsansicht zu navigieren. Die vuex-Aktion behält den Datensatz mit AJAX bei und drückt (ersetzt oder hängt) den zurückgegebenen Datensatz in die Übersichtsliste im Geschäft. Das Problem ist, dass die Änderungen erst in der Übersichtsansicht erscheinen, wenn ich manuell navigiere.

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 (nachfolgenden Versand und Navigation bemerken):

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

In der Mutation, anstatt das zu tun:

state.records[i] = record; 

versuchen Sie folgendes:

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

Warum:

Aufgrund von Einschränkungen in JavaScript, Vue can't detect, wenn Sie direkt ein Element mit dem Index gesetzt, z.B. vm.items[indexOfItem] = newValue

Sie können man tun, folgen diese zu überwinden:

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

oder

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