Question

我是vuex的新手，但我有一个应该可以解决的问题，但事实并非如此。

我有一个产品列表，我想从中得到一个项目。

我的状态如下：

const state = {
  products: [
    {
      id: 1,
      manId: 3,
      name: "Samsung S7 Edge",
      price: 659,
      image:
        "https://www.boostmobile.com/content/dam/boostmobile/en/products/phones/samsung/s7-edge/black/device-front.png.transform/pdpCarousel/image.jpg",
      description:
        '5.5" Quad HD Super AMOLED | 12 MP Phase Detection Autofocus Rear Camera / 5 MP Front Facing Camera | Android Marshmallow 6.0 | Wi-Fi 802.11 a/b/g/n/ac, Dual-Band, Wi-Fi Direct, Hotspot | Water-Resistant Features an IP68 Rating (30 Min. In 1m Of Water) | Low-Light Camera | Expandable Storage Up To 200 GB | Samsung Pay',
      manufacturer: {
        id: 3,
        name: "Samsung"
      }
    },
    {
      id: 2,
      manId: 1,
      name: "iPhone 7",
      price: 769,
      image:
        "https://www.t-mobile.com/content/dam/t-mobile/en-p/cell-phones/apple/apple-iphone-7/matte-black/Apple-iPhone7-MatBlack-1-3x.jpg",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore enim eveniet fuga placeat velit. Dolorem minima nemo nulla perspiciatis totam. Consequuntur debitis dolorem eveniet illo magni nobis perspiciatis quidem quisquam.",
      manufacturer: {
        id: 1,
        name: "Apple"
      }
    },
    {
      id: 3,
      name: "Xperia XZ",
      price: 649,
      image:
        "https://notebookspecialista.hu/files/pix-product/xperia-xz-premium-silver-front.png",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore enim eveniet fuga placeat velit. Dolorem minima nemo nulla perspiciatis totam. Consequuntur debitis dolorem eveniet illo magni nobis perspiciatis quidem quisquam.",
      manufacturer: {
        id: 2,
        name: "Sony"
      }
    }... //<--rest of dummy data is here

  ],
  //product is used for storing a single item 
  product : [

  ]
};

当我转到特定路线时，我会执行操作

[TYPES.actions.productById]({ commit }, {id}) {
    console.log("id: ",id); //prints id correctly so that's not the problem
    commit(TYPES.mutations.productById,id);
  }

我的突变

[TYPES.mutations.productById](state,id){

    state.product = [];
    console.log("product before: ", state.product); //product before:  Array []
    state.product.push( state.products.find(x => x.id === id));

    console.log("product after:", state.product); //product after: Array [ undefined ]
  }

因此由于某种原因，我不能将一个项目从一个产品推到另一个产品。更奇怪的是，它在jsfiddle上可以完美地工作。

即使我在产品中设置了一个虚拟商品，并且不只是将动作/突变用作吸气剂，它也将在组件的计算属性中未定义！

我有很多护送警告，但我猜这些不能引起警告，所以我迷路了...有什么想法吗？

在vuex存储中推送到数组后，为什么数组未定义？

0 个答案: