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

Question

我有一个 codesandbox 设置 here应该打印三个日期。

最相关的代码是:

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");
  }
});

我得到的具体错误信息是Error in render: "InternalError: too much recursion"

Vuex数组中item的正确拼接方式是什么？

Answer 1

这就是问题 state.dateTimes.splice(i, 0, state.dateTimes); 您总是在 state.dateTimes 中添加相同的日期将具有值，因为切片操作尚未影响数组。

简单的解决方案是将其删除为 state.dateTimes.splice(i, 0, test); 这可能不是您想要的解决方案，但它会修复最大调用堆栈错误