Vue利用pinia来完成组件之间的数据共享，可持续化存储要点总结和部分代码

//pinia的使用简单来说就是在一个文件里面写好对应的数据和逻辑代码（js代码),然后在需要的vue组件中import {mapState, mapActions} from 'pinia'和import  Store  from '../store/counter'

//需要注意的是mapState和 mapActions都需要...的写法才可以用，并且mapState是在computed里面写，mapActions是在methods里面写,所以这里的'count','doublecount'代表传递的数值，'add','minus','asyncadd'代表传递的方法

...mapState(Store,['count','doublecount'])

...mapActions(Store,['add','minus','asyncadd'])

//然后还需要注意的就是对应的数据和逻辑代码（js代码)的书写，下面代码这里的state和vue里面data类似,getters和computed类似,  actions和methods类似。

import { defineStore } from 'pinia'

const Store = defineStore('cart', {
    state(){
        return {
            cart:[],
        }
    },
       persist: true,
    getters: {
        totalcount(state){
            return state.cart.reduce((sum,item)=>sum+item.count,0)
        },
        totalprice(state){
            return state.cart.reduce((sum,item)=>sum+item.price*item.count,0)
        }
    },
    actions:{
        addCart(goods){
            const list=this.cart.find(item=>item.id==goods.id)
            if(list){
                list.count++
            }else{
                this.cart.push({
                    ...goods,
                    count:1,
                })
            }
        },
        removeCart(id){
            this.cart=this.cart.filter(item=>item.id!==id)
        }
    }
})

export default Store

//当然还有和vue-router一样操作的js文件，但是相对简单多了，不用多余的配置。直接这样就行

import {createPinia} from 'pinia'

const pinia=createPinia()

export default pinia

//最后在main.js文件中use(pinia)

//如果想在pinia中实现数据的可持续化存储，还可以进行npm i pinia-plugin-persistedstate对应包的下载，然后进行简单的import导入，use,和在对应的js文件persist: true,就可以了