vue实现商品管理

Vue 实现商品管理的基本方法

环境准备
安装 Vue CLI 创建项目：

npm install -g @vue/cli
vue create product-management
cd product-management

项目结构
推荐按功能模块划分目录：

src/
├── components/
│   ├── ProductList.vue
│   ├── ProductForm.vue
├── views/
│   ├── ProductManagement.vue
├── store/ (Vuex)
│   ├── modules/
│   │   └── products.js

核心功能实现

商品列表展示
使用 v-for 渲染商品数据，配合分页组件：

<template>
  <div v-for="product in products" :key="product.id">
    <h3>{{ product.name }}</h3>
    <p>价格: {{ product.price }}</p>
  </div>
  <paginator :total-items="total" @page-changed="loadProducts"/>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      total: 0
    }
  },
  methods: {
    async loadProducts(page = 1) {
      const res = await axios.get(`/api/products?page=${page}`)
      this.products = res.data.items
      this.total = res.data.total
    }
  }
}
</script>

商品表单组件
实现新增/编辑的双向绑定：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.name" placeholder="商品名称">
    <input type="number" v-model="form.price">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  props: ['initialData'],
  data() {
    return {
      form: this.initialData || { name: '', price: 0 }
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('submit', this.form)
    }
  }
}
</script>

状态管理方案

Vuex 模块化存储
创建商品专用的 store 模块：

// store/modules/products.js
const state = {
  allProducts: []
}

const mutations = {
  SET_PRODUCTS(state, products) {
    state.allProducts = products
  }
}

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

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

组合式 API 写法
使用 Vue 3 的 Composition API：

import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const searchQuery = ref('')

    onMounted(() => {
      store.dispatch('products/fetchProducts')
    })

    const filteredProducts = computed(() => {
      return store.state.products.allProducts.filter(
        p => p.name.includes(searchQuery.value)
      )
    })

    return { searchQuery, filteredProducts }
  }
}

高级功能扩展

图片上传处理
使用 FileReader 实现本地预览：

methods: {
  handleImageUpload(e) {
    const file = e.target.files[0]
    const reader = new FileReader()
    reader.onload = (event) => {
      this.form.imageUrl = event.target.result
    }
    reader.readAsDataURL(file)
  }
}

数据验证
使用 Vuelidate 进行表单校验：

import { required, minValue } from '@vuelidate/validators'

export default {
  validations() {
    return {
      form: {
        name: { required },
        price: { minValue: minValue(0) }
      }
    }
  }
}

性能优化
对商品列表进行虚拟滚动：

<template>
  <RecycleScroller
    :items="products"
    :item-size="100"
    key-field="id"
  >
    <template v-slot="{ item }">
      <product-item :data="item"/>
    </template>
  </RecycleScroller>
</template>