时间戳

首页 > 解决方案 > Vuex - 将对象数组添加到商店需要很长时间

arrays - Vuex - 将对象数组添加到商店需要很长时间

问题描述

我在 Vuex 的一个突变中这样做：

console.time('ADD products')
state.products = products
console.timeEnd('ADD products')

“产品”是一个包含 350 个对象的数组。state.product 在商店中声明如下：

const state = {
  products: [],
...
}

console.time/timeEnd 告诉我这大约需要 70 毫秒。这不可能像预期的那样快。

我曾尝试打开和关闭严格模式，正如在类似帖子中提到的解决方案，但完全没有效果。

信息：Vue：2.5.13 Vuex：3.0.1 在 MacBook Pro 上最新版本的 Chrome 上调试

数组中的产品如下所示：

{
  id: 9633,
  title: 'Dark Grey Canvas Satchel',
  brand: 'Delton Bags',
  price: '£49',
  beforePrice: false,
  isNew: false,
  discount: 0,
  link: 'http://localhost:3000/dark-grey-canvas-satchel-p.html',
  images: [
    'https://res.cloudinary.com/image/upload/f_auto,c_pad,q_80,w_X-WIDTH,h_X-HEIGHT/media/catalog/product/9/0/9027A-2.jpg',
    'https://res.cloudinary.com/image/upload/f_auto,c_pad,q_80,w_X-WIDTH,h_X-HEIGHT/media/catalog/product/h/d/hd-trendhim-12-2016-12.jpg',
  ],
  basePrice: 449,
  localPrice: 49,
  filters: {
    th_filter_farve: ['228'],
    th_filter_materiale: ['351'],
    th_filter_computersize: ['573'],
    th_brand: ['277'],
    th_price: 49,
  },
  filterAttributes: { canBeShortened: 0 },
  sorting: {
    qty_ordered: 47,
    qty_ordered_store: 0,
    newest: '9633',
    defaultSorting: 0,
  },
}

我在问什么：

  1. 我能期望的速度是多少
  2. 依赖此 state.products 的任何计算属性会减慢此性能吗？
  3. 将这样的数组添加到商店的最快方法是什么？

问候卡斯帕

标签： arraysvue.jsvuex

解决方案

推荐阅读