尝试拼接Vuex数组时的无限递归

Question

I have a codesandbox setup up here which should be printing off three dates.

The most relevent pieces of code are:

import Vue from "vue";
import App from "./App";
import Vuex from "vuex";
Vue.use(Vuex);

const { DateTime } = require("luxon");
Vue.config.productionTip = false;

var store = new Vuex.Store({
  debug: true,
  state: {
    dateTimes: [
      { startTime: DateTime.local(), meta: "test" },
      { startTime: DateTime.local().plus({ days: 2 }), meta: "test" }
    ]
  },
  mutations: {
    addItem(state) {
      var test = {
        startTime: DateTime.local().plus({ days: 1 }),
        meta: "test"
      };
      for (var i = 0; i < state.dateTimes.length; i++) {
        if (state.dateTimes[i].startTime > test.startTime) {
          state.dateTimes.splice(i, 0, state.dateTimes);
        }
      }
      state.dateTimes.push(test);
    }
  }
});

new Vue({
  el: "#app",
  store: store,
  components: { App },
  template: "<App/>",
  created: function() {
    this.$store.commit("addItem");
  }
});

The specific error message I get is Error in render: "InternalError: too much recursion"

What is the correct way to splice in item in Vuex array?

Answer 1

This is the problem state.dateTimes.splice(i, 0, state.dateTimes); You're always adding the same dates back in as state.dateTimes will have the values in as the slice operation hasn't affected the array yet.

Simple solution is to remove it to be state.dateTimes.splice(i, 0, test); This may not be the solution you want but it will fix the max call stack error