Vuex：如何在mutation中追加数据至Store且避免重复？

问题根源分析 #

你现在遇到的问题主要来自两个细节：

1. 初始state.data是数组结构，但你的RECEIVE_PRICE mutation里直接把它赋值成了单个对象（state.data = { symbol: symbol, price: price }），这直接破坏了数组结构，导致每次新数据进来都会覆盖原有内容。
2. 当你尝试用push时，没有做重复校验，所以同一个加密货币会被多次添加到数组里。

解决方案 #

我们需要调整mutation的逻辑，同时确保state结构始终为数组，再加入重复判断：

1. 修正State初始结构（可选但建议） #

先把state的初始值改成空数组，避免初始空对象的干扰：

state: {
  data: [] // 直接初始化空数组，比带空对象更合理
}

2. 修改Mutation逻辑 #

更新RECEIVE_PRICE mutation，加入重复检查逻辑：

RECEIVE_PRICE(state, { symbol, price }) {
  // 先查找数组中是否已有相同symbol的项
  const existingItem = state.data.find(item => item.symbol === symbol);
  
  if (existingItem) {
    // 如果存在，直接更新该币种的价格
    existingItem.price = price;
  } else {
    // 如果不存在，追加新的币种数据
    state.data.push({ symbol, price });
  }
}

3. 优化Getter（可选） #

你的crypto_prices getter现在返回整个state，其实应该只返回state.data，这样组件里拿到的直接是目标数组，更直观：

getters: {
  crypto_prices: state => state.data // 直接返回数据数组
}

为什么这样有效？ #

• 保持数组结构：始终让state.data维持数组类型，确保能存储多笔加密货币数据。
• 重复校验：用find方法快速定位是否已有相同币种，存在则更新价格，不存在才追加，从根源避免重复数据。
• 响应式更新：Vuex会自动追踪数组和对象的变化，修改已有项的价格或追加新项都会触发组件的响应式更新，无需额外操作。

内容的提问来源于stack exchange，提问作者mrks