pinia之Vue 的存储库,案例：允许跨组件/页面共享状态--传值

 pinia之Vue 的存储库,案例：允许跨组件/页面共享状态--传值


第⼀步： npm install pinia
第⼆步：操作 src/main.ts

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

/* 引⼊createPinia，⽤于创建pinia */
import { createPinia } from 'pinia'
/* 创建pinia */
const pinia = createPinia()
/* 使⽤插件 */
app.use(pinia)

第三步:存储+读取数据
// 将需要传递的值 存储
import { defineStore } from "pinia";
export const UserGPS =defineStore('GPS',{
    state(){
        return {
            showguiji:1,
            licensePlate:"",
            geographicLocation:"",
            sumMileage:"",
            todayMileage:"",
        }
    }
})
//第四步:引入UserGPS存储页面
import {UserGPS} from '@/store/modules/GPS.js'
const GPSStore =UserGPS()
//第五步:组件向pinia中set值
// @ts-ignore
 GPSStore.licensePlate=form.value.license_plate;  
 // @ts-ignore
GPSStore.geographicLocation=form.value.geographic_location;  
// @ts-ignore
GPSStore.sumMileage=form.value.sum_mileage;  
// @ts-ignore
GPSStore.todayMileage=form.value.today_mileage;
 //第六步:vue页面对值的使用
import {UserGPS} from '@/store/modules/GPS.js'
const GPSStore =UserGPS()
GPSStore.licensePlate
GPSStore.todayMileage
GPSStore.sumMileage
GPSStore.geographicLocation