pina1

//main.js
import { createApp } from 'vue'
import './style.css'
import './assets/font/iconfont.css'  //字体图标
import App from './App.vue'
import router from './router'
import {createPinia} from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist' //pinia数据持久化
const pinia = createPinia(); //实例化
pinia.use(piniaPluginPersist) //

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

模块1

// store/index.js
import {defineStore} from 'pinia'
import {getLists} from '@/utils/http'

export const productStore = defineStore('product',{
    state:()=>({
        products:[]
    }),
    actions:{
        //异步请求，返回请求结果
        getData(){
            return new Promise((resolve,reject)=>{
                getLists().then(res=>{
                    resolve(res)
                }).catch(err=>{
                    reject(err)
                })
            })
        },
        //异步请求，直接赋值state状态
        async getData2(){
            const lists = await getLists().then(res=>res.data.data);
            this.products = lists;
        }
    }
})

//vue文件使用
<template>
    <div class="main">
        <Lists :products="products"/>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import Nav from './nav.vue'
import Lists from './lists.vue'
//import {getLists} from '@/utils/http'
import {productStore} from '@/store/product' //导入
import {storeToRefs} from 'pinia'
const store = productStore(); //实例化
const products = ref([])
// const {products} = storeToRefs(store); //解构数据且数据是响应式

//方法一：当前组件发送请求
//let products = ref([]);
// onMounted(async ()=>{
//     let res = await getLists();
//     products.value = res.data.data;
// })

//方法二：请求是通过store
//let products = ref([]);
// onMounted(async ()=>{
//     let res = await store.getData();
//     products.value = res.data.data;
// })

//方法三：调用store中的方法
onMounted(async ()=>{
    let res = await store.getData();
    products.value = res.data.data;
})

模块2

//sotre/xxx.js
import {defineStore} from 'pinia'
export const basketStore = defineStore('basket',{
    state:()=>({
        basketItems:[]
    }),
    getters:{
        getCount(state){
            return state.basketItems.reduce((total,cur)=>total+cur.count,0)
        }
    },
    actions:{
        addItem(item){
            //this.basketItems.push(item);  //添加数据
            if(this.basketItems.length>0){
                let list = this.basketItems.filter(v=>v.product_id==item.product_id);
                if(list.length>0){
                    list[0].count+=1;
                    return;
                }else {
                    this.basketItems.push(item);  //添加数据
                }
            }else {
                this.basketItems.push(item);  //添加数据
            }
        }
    },
    persist:{  //数据持久化
        enabled:false
    }
})

//vue文件
1
<template>
    <div class="c-wrap">
        <ul>
            <li v-for="v in products" :key="v.product_id">
                    <span class="shoppingCart" @click="addProduct(v)">
                        <i class="iconfont icon-gouwuche"></i>
                    </span>
            </li>
        </ul>
        
    </div>
</template>

<script setup>
import {ref,defineProps} from 'vue'
import {basketStore} from '@/store/basket'

const store = basketStore();
const {products} = defineProps({
    products:Array
})

function addProduct(v){
    v.count = 1; //添加数量属性
    store.addItem(v); //存储数据到pinia
}
</script>

//vue2文件
<template>
    <div class="basket">
        <ul>
            <li v-for="v in basketItems" :key="v.product_id">
                <div class="basket-img">
                    <img :src="v.product_img_url"/>
                </div>
                <div class="basket-list">
                    <span>{{v.product_name}}</span>
                    <span>￥：{{v.product_uprice}}</span>
                    <span>数量：{{v.count}}</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import {basketStore} from '@/store/basket'
import {storeToRefs} from 'pinia'

const store = basketStore();
const {basketItems} = storeToRefs(store); //解构且响应式

</script>