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,就可以了