Attribute Vuex Store

Attribute Store is designed to handle all actions related to the attributes management


  state: {
    list_by_code: {},
    list_by_id: {},
    labels: {}

As we're using the attributes dictionary for the product management in a very similar way Magento does (EAV model) we're operating on the attributes, attribute types and dictionaries.

Attributes are explicitly loaded by the user by calling the attribute/list method. For example, when you're going to work with customizable attributes of the product or to work on variants you need to prefetch the attributes metadata:

this.$store.dispatch('attribute/list', {
  filterValues: [true],
  filterField: 'is_user_defined',

This is an example from product compare feature.

The attribute state data:

  • list_by_code - this is a dictionary where you can get the specific attribute by just accessing the list_by_code['color'] etc.
  • list_by_id - this is a dictionary where you can get the specific attribute by just accessing the list_by_id[123] etc.
  • labels - the preloaded labels of attribute values (the V in EAV)


The attribute store provides following public actions:

`list (context, { filterValues = null, filterField = 'attribute_code', size = 150, start = 0 })``

This method is used to load the attributes metadata. filterValues is an array of multiple values like: ['color', 'size'] and the filterField is the attribute field to compare the filterValues against. Usually is a attribute_code or attribute_id. The size and start are just used to limit the list.


Attribute module exports one, very popular helper method:

export function optionLabel (state, { attributeKey, searchBy = 'code', optionId })

This is used to get the Label for specific optionId. For example, when the user filters products and uses the 165 attribute_value we can call optionLabel( { attributeKey: 'color', optionId: 165 }) to get back 'Red' label.


All state members should have been accessed only by getters. Please take a look at the state reference for data formats

export default {
  attributeListByCode: state => state.list_by_code,
  attributeListById: state => state.list_by_id,