案例——商品管理 vue

案例讲解——商品管理模块使用Vue.js

在Vue.js框架中构建商品管理功能，通常会涉及到以下几个步骤：

1. **组件设计**：首先，可以创建一些基础组件，如`ProductList`用于展示商品列表，`ProductItem`显示单个商品信息，以及`AddProductForm`供用户添加新商品。

<template>
  <div>
    <ProductList :products="products" />
    <AddProductForm @submit="addProduct"/>
  </div>
</template>

<script>
export default {
  data() {
    return { products: [], };
  },
  methods: {
    addProduct(product) {
      // 添加产品逻辑
    }
  }
};
</script>

2. **状态管理**：使用Vuex来管理商品数据和状态。创建一个store，包含`state`（商品数组）、`mutations`（更新商品的操作）和`actions`（异步操作）。

import Vue from 'vue';
import Vuex from 'vuex';

const state = {
  products: [],
};

const mutations = {
  setProducts(state, products) {
    state.products = products;
  },
};

const actions = {
  async fetchProducts({ commit }) {
    const response = await axios.get('/api/products');
    commit('setProducts', response.data);
  },
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
});

3. **API调用**：通过axios等库与后端API交互，获取、添加、删除商品信息。

4. **事件监听**：在`ProductList`组件中监听`@item-click`事件，当点击商品时触发`editProduct`或`deleteProduct`方法，通过props传递商品ID到父组件处理详情编辑或删除操作。

<template>
  <li v-for="(product, index) in products" :key="index">
    <button @click="$emit('item-click', product.id)">编辑</button>
    <!-- ... -->
  </li>
</template>
<script>
export default {
  emit('item-click', id)
};
</script>