如何正确使用 Vuex 商店？

Question

所以我目前面临如何在 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>

category 对象包含大量关于类别的数据，例如图标、标题、路径等，product 对象将被发送到服务器，因此基本上它只需要category.id 属性。

所以我的问题是我应该将整个类别对象存储在 Vuex 的产品中还是只存储 @click="setProductCategory(category.id);" 然后做一些额外的事情来显示类别名称？

Answer 1

这取决于您的情况，如果类别对象很大，然后与产品一起重复相同的类别记录。因此，最好将扁平结构的小物件存放在仓库中。