vue 购物车数量回显，商品数据拉取的是服务器的，之前加减数量使用本地存储，{'sku001':2,'sku002':3}

在Vue中实现购物车数量回显，并且商品数据是从服务器拉取的，你需要在组件中实现几个关键步骤。以下是一个基本的实现方法：

1. 首先，你需要从服务器获取商品数据，并将其存储到组件的状态（如data函数返回的对象）中。

2. 接着，你可以使用计算属性(computed property)或方法(methods)来计算当前购物车中每个商品的总数量。

3. 当用户改变某个商品的数量时（如通过点击加号或减号），你需要更新本地存储中的数量，并且最好同时发送请求到服务器，更新服务器上的购物车数量。

4. 当组件加载时，你应该检查本地存储，并据此来初始化购物车数量。

以下是一个简化的代码示例：

<template>
  <div>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - 数量:
        <button @click="changeQuantity(product.id, -1)" :disabled="product.quantity <= 1">-</button>
        {{ product.quantity }}
        <button @click="changeQuantity(product.id, 1)">+</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [], // 从服务器获取的商品数据
      cart: JSON.parse(localStorage.getItem('cart')) || {} // 从本地存储获取购物车数据
    };
  },
  methods: {
    fetchProducts() {
      // 模拟从服务器获取商品数据
      this.products = [
        { id: 'sku001', name: '商品1', price: 10 },
        { id: 'sku002', name: '商品2', price: 20 },
        // ...更多商品
      ];
    },
    changeQuantity(productId, change) {
      // 更新本地存储和服务器的购物车数量
      let quantity = this.cart[productId] || 1;
      quantity += change;
      if (quantity < 1) quantity = 1;
      this.cart[productId] = quantity;

      // 更新本地存储
      localStorage.setItem('cart', JSON.stringify(this.cart));

      // 发送请求到服务器以更新服务器上的购物车数量
      this.updateServerCart(productId, quantity);
    },
    updateServerCart(productId, quantity) {
      // 这里应包含发送请求到服务器的逻辑
      console.log(`更新商品 ${productId} 数量为 ${quantity}`);
    }
  },
  created() {
    this.fetchProducts();
  }
};
</script>