当前位置：首页 > VUE

vue 实现商品分类

2026-02-20 07:09:42VUE

Vue 实现商品分类的方法

在 Vue 中实现商品分类功能，通常需要结合组件化开发、状态管理和 API 交互。以下是几种常见的实现方式。

使用动态组件渲染分类列表

通过 v-for 动态渲染分类列表，结合点击事件切换当前分类。

<template>
  <div>
    <ul class="category-list">
      <li 
        v-for="category in categories" 
        :key="category.id"
        @click="selectCategory(category)"
        :class="{ active: currentCategory.id === category.id }"
      >
        {{ category.name }}
      </li>
    </ul>
    <div class="product-list">
      <div v-for="product in currentProducts" :key="product.id">
        {{ product.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [],
      currentCategory: {},
      products: []
    };
  },
  computed: {
    currentProducts() {
      return this.products.filter(
        product => product.categoryId === this.currentCategory.id
      );
    }
  },
  methods: {
    selectCategory(category) {
      this.currentCategory = category;
    }
  },
  async created() {
    // 获取分类数据
    this.categories = await fetchCategories();
    // 获取商品数据
    this.products = await fetchProducts();
    // 设置默认选中第一个分类
    if (this.categories.length > 0) {
      this.currentCategory = this.categories[0];
    }
  }
};
</script>

使用 Vue Router 实现分类路由

通过路由参数动态加载不同分类的商品。

// router.js
{
  path: '/category/:id',
  name: 'Category',
  component: CategoryPage
}

<!-- CategoryPage.vue -->
<template>
  <div>
    <h2>{{ category.name }}</h2>
    <ProductList :products="products" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      category: {},
      products: []
    };
  },
  async created() {
    const categoryId = this.$route.params.id;
    this.category = await fetchCategory(categoryId);
    this.products = await fetchProductsByCategory(categoryId);
  },
  watch: {
    '$route.params.id'(newId) {
      this.loadCategoryData(newId);
    }
  },
  methods: {
    async loadCategoryData(categoryId) {
      this.category = await fetchCategory(categoryId);
      this.products = await fetchProductsByCategory(categoryId);
    }
  }
};
</script>

使用 Vuex 管理分类状态

对于大型应用，可以使用 Vuex 集中管理分类和商品数据。

// store.js
export default new Vuex.Store({
  state: {
    categories: [],
    currentCategoryId: null,
    products: []
  },
  mutations: {
    SET_CATEGORIES(state, categories) {
      state.categories = categories;
    },
    SET_CURRENT_CATEGORY(state, categoryId) {
      state.currentCategoryId = categoryId;
    },
    SET_PRODUCTS(state, products) {
      state.products = products;
    }
  },
  actions: {
    async fetchCategories({ commit }) {
      const categories = await api.getCategories();
      commit('SET_CATEGORIES', categories);
      if (categories.length > 0) {
        commit('SET_CURRENT_CATEGORY', categories[0].id);
      }
    },
    async fetchProducts({ commit }) {
      const products = await api.getProducts();
      commit('SET_PRODUCTS', products);
    },
    selectCategory({ commit }, categoryId) {
      commit('SET_CURRENT_CATEGORY', categoryId);
    }
  },
  getters: {
    currentProducts: state => {
      return state.products.filter(
        product => product.categoryId === state.currentCategoryId
      );
    }
  }
});

实现多级分类

对于需要多级分类的场景，可以使用递归组件。

<template>
  <div>
    <CategoryTree 
      :categories="topLevelCategories" 
      @select="selectCategory"
    />
  </div>
</template>

<script>
import CategoryTree from './CategoryTree.vue';

export default {
  components: { CategoryTree },
  data() {
    return {
      categories: []
    };
  },
  computed: {
    topLevelCategories() {
      return this.categories.filter(c => !c.parentId);
    }
  },
  async created() {
    this.categories = await fetchCategories();
  },
  methods: {
    selectCategory(category) {
      console.log('Selected category:', category);
    }
  }
};
</script>

<!-- CategoryTree.vue -->
<template>
  <ul>
    <li v-for="category in categories" :key="category.id">
      <div @click="$emit('select', category)">
        {{ category.name }}
      </div>
      <CategoryTree 
        v-if="hasChildren(category.id)"
        :categories="getChildren(category.id)"
        @select="$emit('select', $event)"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CategoryTree',
  props: ['categories'],
  methods: {
    hasChildren(categoryId) {
      return this.categories.some(c => c.parentId === categoryId);
    },
    getChildren(categoryId) {
      return this.categories.filter(c => c.parentId === categoryId);
    }
  }
};
</script>