vue3微信公众号商城项目实战系列（8）商品展示页面

本篇实现在首页展示商品功能，表结构如下：

表名	字段	功能
goods	goods_id (int) 商品编号 goods_name (varchar) 商品名称 photo (varchar) 商品图片 price (decimal) 价格	商品表

页面呈现效果如下：

 

第1步：在 api.js 中加入获取首页商品信息和加购物车的接口方法，如下：

export function goodsRecommend(data) {
  return request({
    url: '/goods/recommend', 
    method: 'post',
    data: data
  })
}


export function cartAdd(data) {
  return request({
    url: '/cart/add', 
    method: 'post',
    data: data
  })
}

第2步：在 Home.vue 中修改代码如下：

布局块代码

<template>
    <div class="home"> 

        <div class="goods-list">
            <div class="goods-item" v-for="(item,index) in recommendtionList">
                <div><img class="goods-img" :src="item.photo" /></div>
                <div class="goods-name"><span>{{ item.goodsName }}</span></div>
                <div class="goods-add">
                    <span class="goods-price">￥{{ item.price }} 元</span>
                    <template v-if="item.qty==0"> 
                        <img src="/public/cart.png" @click="onAddCart(item.goodsId,index)" /> 
                    </template> 
                    <template v-else>
                        <img src="/public/cartadd.png" />
                    </template>                   
                </div>  
            </div> 
        </div>
 
        <TabBar name="home" />
    </div>    
</template>

第5行中 recommendtionList 是从后端接口获取的商品信息数组，json 格式 ，使用 v-for 遍历输出。

第10行中的 item.qty 是该商品已经加入购物车的数量，如果==0 就显示购物车图标，否则显示已加入的图标，如下：

 脚本块代码

<script setup>
import { onMounted, reactive, toRefs } from 'vue';
import {goodsRecommend, cartAdd} from '@/http/api';
import TabBar from '@/components/TabBar.vue';

const data = reactive({recommendtionList:[] })
let {recommendtionList } = toRefs(data);

onMounted(() => {
    let formData={}; 
    goodsRecommend(formData).then(res=>{
        data.recommendtionList=res;
    });
})

function onAddCart(goodsId, index){
    let formData = {goodsId:goodsId,qty:1}; 
    cartAdd(formData).then(res=>{
        data.recommendtionList[index].qty=1; 
    })
}
</script>

第3行导入 api.js 中的接口方法，分别用于显示商品、加购物车。

第6~7行初始化一个商品数组对象用于接收 goodsRecommend() 接口的返回值

，toRefs( ) 函数能将 响应式对象（这里是data）的每个属性还原为单独的响应式对象，也可以不这样处理，那布局代码块中的第5行要这样写：

<div class="goods-item" v-for="(item,index) in data.recommendtionList">

即由 "recommendtionList" 改成 "data.recommendtionList" 就可以了。

 

第9~14行是在钩子函数 onMounted()中获取商品信息，钩子函数在页面加载完后执行，这样就能第一时间显示商品信息。

第16~21行实现加购物车的功能，data.recommendtionList[index].qty=1; 的作用是当用户加完购物车后

，图标能马上更换（见下图） ，因为 recommendtionList 是响应式对象，任何时候其值发生改变都会同步影响所有引用到的地方。

 

样式代码块

<style>
.home{
    padding-bottom: 60px;
}
.goods-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly; 
    background-color: #f0f0f0;
}
.goods-item{
    width: 176px;
    margin-bottom: 7px;
    padding:4px 10px; 
    background-color: #FFF;  
    text-align: center; 
}
.goods-img{
    width:150px;
    height: 150px;
    vertical-align: middle; 
    border:solid 1px #E0E0E0;
    border-radius: 6px;
 }
 .goods-name{ 
    margin-top: 4px;
    text-align: left;
 }
 .goods-add{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
 } 
 .goods-price{
    font-size: 16px;
    font-weight: bold;
    color:orangered;
 } 

</style>

这里没特别的地方，根据布局需要去定义就可以了。

 

最后，我们结合上一篇中的需求来解决加购物车后显示角标的问题。

这里需要用到 vue3 的另一个重要包 pinia ， 它是官方推荐用来管理状态的（vue2中的状态管理包是vuex）。

官方文档地址：https://pinia.vuejs.org/zh/

1. 在本例子中，状态管理（本质是管理数据，用状态管理这个名称含有一种动态的意味）用来管理购物车中商品的数量

，当用户在任何页面修改了购物车商品数量的时候，状态管理都需要记录下来，这样不管用户怎么切换页面，购物车的角标都能正确显示。

2. 状态管理定义的数据所有页面都能引用，相当于一个全局的数据处理器。

3.更改后的数量需要持久化，确保用户刷新的时候不会归 0。

使用步骤如下：

第1步：安装 pinia，命令： npm install pinia

第2步：在 src/stores/目录下新增 cart.js 文件，stores 目录集中存放所有状态管理的相关文件，如下图。

第3步：修改 main.js， 将 pinia 的实例挂载到 app实例上（见红色字体），如下：

import { createApp } from 'vue'
import App from './App.vue'

 4 import { createPinia } from 'pinia'
 5 const pinia = createPinia();

import './assets/main.css'

import rtx from './router/routerx.js'


createApp(App).use(pinia).use(rtx).mount('#app')

说明：4~5行创建一个pinia实例对象，第12行用use()方法挂载到app实例对象上。

第4步：定义store，cart.js中代码如下：

export const useCartStore = defineStore('cart', () => {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    function reduction(){
        if(count.value>1){
            count.value--;
        } 
    }
  
    return { count, increment, reduction }
  })

说明：

第1行：定义store 用 defineStore()函数（这里是组合式API的写法，和选项式API区别见如下官方文档截图），对象名称 useCartStore 可以是任意的

，但建议使用 useXxxStore 这样的命名方式，Xxx 作为 defineStore()函数的第一个参数（必须唯一）。

 

第2行：count 是保存购物车中商品数量的变量，是值类型，所以变成响应式数据需要用 ref() 函数处理（引用类型用 reactive()函数）

，使用的时候不能直接用，必须是 xxx.value 的形式 这是值类型和引用类型的差别。

第3~10行：定义2个方法处理 count ， 建议用方法去操作 count ，不要直接赋值。

第12行：用 return 语句把这3个对象(1个变量2个方法)返回，外部文件引用 cart.js 后就可以使用这3个对象了。

 

第5步，使用store ，修改 Home.vue 中 <script> 脚本代码块的内容如下（见红色字体部分）：

<script setup>
import { onMounted, reactive, toRefs } from 'vue';
import {goodsRecommend, cartAdd} from '@/http/api';
import TabBar from '@/components/TabBar.vue';
 5 import { useCartStore } from '@/stores/cart.js'
 6 const cartStore = useCartStore();

const data = reactive({recommendtionList:[] })
let {recommendtionList } = toRefs(data);

onMounted(() => {
    let formData={}; 
    goodsRecommend(formData).then(res=>{
        data.recommendtionList=res;
    });
})

function onAddCart(goodsId, index){
    let formData = {goodsId:goodsId,qty:1}; 
    cartAdd(formData).then(res=>{
        data.recommendtionList[index].qty=1; 
        cartStore.increment();
    })
}
</script>

第5行引用store对象，第6行实例化，第22行调用 increment() 函数给将store对象的count属性加1。

最后我们到 TabBar.vue 组将中使用 store对象的count属性就可以了，TabBar.vue 代码修改如下（见红色字体部分）：

<template>
    <div class="tab-bar">
        <template v-for="item in arrTab">
            <div :class="item.tabClass" @click="onClick(item.tabName)"> 
                <img class="tab-bar-item-img" :src="item.tabIcon" />
                <template v-if="item.tabName=='cart' && cartStore.count">
                    <span>{{ item.tabText }} {{ cartStore.count }}</span>
                </template>
                <template v-else>
                    <span>{{ item.tabText }}</span>
                </template>
            </div> 
        </template> 
    </div>    
</template>

第6~11行是修改的部分, 用v-if 校验如果tab项=购物车而且商品数量>0时就显示角标。

<script>脚本代码块如下：

<script setup> 
import { reactive, onMounted } from 'vue';
import {useRouter} from 'vue-router';
4 import { useCartStore } from '@/stores/cart.js'
5 const cartStore = useCartStore();

//一下相同部分省略
 
</script>

刷新页面后点加购物车，效果如下：

角标效果（应该显示在图标右上角）用 css 的 relative 定位实现，这里就不展开了。

 

最后，用 pinia 的 pinia-plugin-persistedstate 插件持久化 store 解决 刷新页面后 count 消失的问题：

第1步： 安装插件，命令：npm install  pinia-plugin-persistedstate

第2步：将插件挂载到 pinia 实例上，修改 main.js 如下（见红色字体）：

import { createApp } from 'vue'
import App from './App.vue'

import { createPinia } from 'pinia';
const pinia = createPinia();

 7 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 8 pinia.use(piniaPluginPersistedstate)

import './assets/main.css'

import rtx from './router/routerx.js'


createApp(App).use(pinia).use(rtx).mount('#app')

第3步：在 cart.js 中 做持久化配置，代码如下（见红色代码）：

import { ref } from 'vue';
import {defineStore} from 'pinia';

export const useCartStore = defineStore('cart', () => {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    function reduction(){
        if(count.value>1){
            count.value--;
        } 
    }
  
    return { count, increment, reduction }
  },
  { persist:true }
)

刷新页面，购物车的角标值已经不会清 0 了，如下图：