vue开发组件的步骤，分四步：静态、发请求、vuex、动态展示

最新推荐文章于 2024-05-31 09:44:04 发布

rich_c

最新推荐文章于 2024-05-31 09:44:04 发布

阅读量390

点赞数

文章标签： vue.js vue

本文链接：https://blog.csdn.net/rich_c/article/details/124309812

版权

本文详细介绍了使用Vue.js进行前端开发的步骤，从编写静态页面开始，逐步配置路由，设置API接口以传递参数如skuId，然后利用Vuex管理状态，动态获取并展示产品详情信息。在Vuex中定义了actions、mutations和getters，实现数据的获取与更新，并最终动态渲染组件。

摘要由CSDN通过智能技术生成

1.写好静态页面

2.配置路由

3.配置api接口，发请求，skuId是要传的参数

4.vuex的配置

import { reqGoodsInfo } from "@/api"

const state = {
    goodInfo : {}
}
const actions = {
    //获取产品详情信息的数据
    async getGoodsInfo(context,skuId){
        let result = await reqGoodsInfo(skuId)
        if(result.code == 200){
            context.commit('GETGOODSINFO',result.data)
        }
    }
}
const mutations = {
    GETGOODSINFO(state,goodInfo){
        state.goodInfo = goodInfo
    }
}
const getters = {
    categoryView(state){
        return state.goodInfo.categoryView
    }
}

export default {
    state,
    actions,
    mutations,
    getters
}

5.动态展示组件