组件Vue 3中的呈现属性

Question

我有两种产品:简单和可配置：

"products" : [
  {
    "type": "simple",
    "id": 1,
    "sku": "s1",
    "title": "Product 1",
    "regular_price": {
      "currency": "USD",
      "value": 27.12
    },
    "image": "/images/1.png",
    "brand": 9
  },
  {
    "type": "configurable",
    "id": 2,
    "sku": "c1",
    "title": "Product 2",
    "regular_price": {
      "currency": "USD",
      "value": 54.21
    },
    "image": "/images/conf/default.png",
    "configurable_options": [
      {
        "attribute_id": 93,
        "attribute_code": "color",
        "label": "Color",
        "values": [
          {
            "label": "Red",
            "value_index": 931,
            "value": "#ff0000"
          },
          {
            "label": "Blue",
            "value_index": 932,
            "value": "#0000ff"
          },
          {
            "label": "Black",
            "value_index": 933,
            "value": "#000"
          }
        ]
      },
      {
        "attribute_code": "size",
        "attribute_id": 144,
        "position": 0,
        "id": 2,
        "label": "Size",
        "values": [
          {
            "label": "M",
            "value_index": 1441,
            "value": 1
          },
          {
            "label": "L",
            "value_index": 1442,
            "value": 2
          }
        ]
      }
    ],
    "variants": [
      {
        "attributes": [
          {
            "code": "color",
            "value_index": 931
          },
          {
            "code": "size",
            "value_index": 1441
          }
        ],
        "product": {
          "id": 2001,
          "sku": "c1-red-m",
          "image": "/image/conf/red.png"
        }
      },
      {
        "attributes": [
          {
            "code": "color",
            "value_index": 931
          },
          {
            "code": "size",
            "value_index": 1442
          }
        ],
        "product": {
          "id": 2002,
          "sku": "c1-red-l",
          "image": "/image/conf/red.png"
        }
      },
      {
        "attributes": [
          {
            "code": "color",
            "value_index": 932
          },
          {
            "code": "size",
            "value_index": 1441
          }
        ],
        "product": {
          "id": 2003,
          "sku": "c1-blue-m",
          "image": "/image/conf/blue.png"
        }
      },
      {
        "attributes": [
          {
            "code": "color",
            "value_index": 933
          },
          {
            "code": "size",
            "value_index": 1442
          }
        ],
        "product": {
          "id": 2004,
          "sku": "c1-black-l",
          "image": "/image/conf/black.png"
        }
      }
    ],
    "brand": 1
  }
]

我从actions (Vuex)获得的上述数据

GET_PRODUCTS_FROM_API({ commit }) {
  return axios('http://localhost:8080/products', {
    method: 'GET',
  })
    .then((products) => {
      commit('SET_PRODUCTS_TO_STATE', products.data);
      return products;
    })
    .catch((e) => {
      console.log(e);
      return e;
    });
}

然后，我变异数据：

SET_PRODUCTS_TO_STATE: (state, products) => {
    state.products = products
}

并从getter中获取

PRODUCTS(state) {
    return state.products = state.products.map((product) => {
        const brand = state.brands.find((b) => b.id === product.brand)
        return {...product, brandName: brand?.title || 'no brand'}
    })
}

之后，我将获取组件中的数据。

目前，我一直在研究如何呈现可配置产品的颜色和大小属性。告诉我怎么做对吗？我需要用vuex或父组件编写逻辑吗？

我试图将数据从父组件推送到子组件。但它又停在那里了。我还尝试使用getter分别分离颜色和大小属性。

Answer 1

通过计算属性和将道具传递给子组件解决了这个问题

computed: {
  getAttributeColors() {
    let attributes_colors = []
    this.product_data.configurable_options.map((item) => {
      if(item.label === 'Color') {
        attributes_colors.push(item.values)
      }
    })
    return attributes_colors
  },
  getAttributeSize() {
    let attributes_size = []
    this.product_data.configurable_options.map((item) => {
      if(item.label === 'Size') {
        attributes_size.push(item.values)
      }
    })
    return attributes_size
  }
}

Answer 2

对于Vuex，语法如下

<template>
  <div>
    <div v-for="product in products" :key="product.id">
      <span>type: {{ product.type }}</span>
      <span>type: {{ product.title }}</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['products']),
    ...mapGetters('fancyNamespace', ['products']), // if namespaced
  },
}
</script>

至于在哪里调用它，我猜直接进入组件。否则，作为explained here，使用Vuex可能根本不相关。

PS:如果你愿意的话，你甚至可以使用rename on the fly。