Vuex 存储，为什么添加到数组会用最后一个条目覆盖存储中的所有值？

Question

我正在使用 vuex-typescript。这是一个商店模块：

import { getStoreAccessors } from "vuex-typescript";
import Vue from "vue";
import store from "../../store";
import { ActionContext } from "vuex";
class State {
  history: Array<object>;
}

const state: State = {
  history: [],
};

export const history_ = {
  namespaced: true,
  getters: {

    history: (state: State) => {

      return state.history;
    },

  },
  mutations: {

    addToHistory (state: State, someob: any) {

      state.history.push(someob);

    },

    resetState: (s: State) => {
      const initial = state;
      Object.keys(initial).forEach(key => { s[key] = initial[key]; });
    },
  },

  actions: {
    addToHistory(context: ActionContext<State, any>, someob: any) {
      commitAddToHistory(store, someob);
    }

  }

const { commit, read, dispatch } =
  getStoreAccessors<State, any>("history_");
const mutations = history_.mutations;
const getters = history_.getters;
const actions = history_.actions;

export const commitResetState = commit(mutations.resetState);
export const commitAddToHistory = commit(mutations.addToHistory);
export const getHistory = read(getters.history);
export const dispatchAddToSearchHistory = dispatch(actions.addToHistory);

现在如果调用 dispatchAddToSearchHistory 或 commitAddToHistory 它总是相同的，所有值都会被覆盖。例如，如果我添加一个元素来存储，那么它看起来像这样：

store = [
  {
    a: 1
  }
]

现在当我添加另一个对象时 {b: 2} 存储变成

store = [
  {
    b: 2
  },
  {
    b: 2
  }
]

所有值均由最后一个条目写入。例如，如果我尝试添加 {c:3} 那么存储看起来像（等等）：

store = [
  {
    c: 3
  },
  {
    c: 3
  },
  {
    c: 3
  }
]

Answer 1

.....嗯，嗯，我想你可能每次都发送同一个对象

请尝试这个突变

addToHistory (state: State, someob: any) {
  state.history.push({...someob});
},

或此操作

addToHistory(context: ActionContext<State, any>, someob: any) {
  commitAddToHistory(store, {...someob});
}

这个，使用扩展运算符，克隆对象。这样您添加的每个项目都将是新对象。

Vuex 存储，为什么添加到数组会用最后一个条目覆盖存储中的所有值？

Vuex store, why adding to array overwrites all values in store with last entry?

javascript

vue.js

vuejs2

vuex

vuex-modules