I'm currently grappling with a logical challenge regarding data storage in Vuex.
<ul>
<li v-for="category in sub_categories" @click="setProductCategory(category);">
<span v-bind:class="{active: category == product.category}"></span>
<a>{{ category.name }}</a>
</li>
</ul>
<p class="resultObject" v-if="product.category">
<span class="active">{{ product.category.name }}</span>
</p>
The category object is rich in information like icon, title, path, etc., while the product object needs only the category.id property when sent to the server.
So my dilemma is whether I should store the entire category object in the product in Vuex or simply use
@click="setProductCategory(category.id);"