网站建设规划表乐清网站建设lonwap

使用hbuiderx创建的项目 里面已经包含了

一.这里简单的说一下 引入方式 有的小伙伴可能没分清

在main.js中直接引入
我这里实现 帮这些引入抽离抽来，在根目录抽离一个出来在根目录新建一个global
文件下 下面建立global.js文件

新建global/global.js

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(persist)
export default function globalUnit(app) {app.use(pinia)
}

main.js中引用

import { createSSRApp } from 'vue'
import App from './App.vue'
import globalUnit  from '@/global/global.js'// #ifdef VUE3
export function createApp() {const app = createSSRApp(App)globalUnit(app)return {app,}
}
// #endif

注意这里有的写发是as 别名的方式

import * as Pinia from  'pinia'app.use(Pinia.createPinia());

其实也是 帮pinia中的所用东西 拿出来 用个别名Pinia 来接收使用

const pinia = createPinia()     也就是 Pinia.createPinia()

createPinia 也就是 pinia 中的一个方法而已

二：废话不多说直接开始使用
举例都是在根目录新建 个人习惯 ，根据自己的方式只要路径对就行

新建stores/userStore.js

userStore.js如下
就比如登录的时候存储的用户信息 userInfo

import { defineStore } from 'pinia';export const useUserStore = defineStore('user', {state: () => ({userInfo: {},}),actions: {login(userInfo) {this.userInfo = userInfo;}},// 可选：持久化插件（如使用 localStorage）persist: true,
});

2. 在页面中使用 引入
   比如在h5login.vue中

<template><view><view class="logonbox"><uni-easyinput maxlength="11" v-model="phone" placeholder="请输入手机号"></uni-easyinput><uni-easyinput v-model="password" type="password" placeholder="请输入密码"></uni-easyinput><button type="primary" @click="handLogin">登录</button></view></view>
</template><script setup>import { useUserStore } from '@/stores/userStore'const userStore = useUserStore()let phone = ref("123456")let password = ref("6666")const handLogin = () => {// 这里自己接口去获取数据 最后传进去晚上 这里模拟一个objlet  obj ={name:"老六",token:"asdaklqjkwewqeq12312daksds"}userStore.login(obj )}
</script><style scoped lang="less">.logonbox {width: 610rpx;height: 300rpx;background: #f4f4f4f4;margin: 200rpx auto;display: flex;flex-direction: column;justify-content: center;}
</style>

三：如果你没开启 持久存储的时候你强行刷新页面 值是会丢失的
开启之后再本地储存里面就是多一个

四：在h5端 使用按上面的配置来没有问题 ，但是在小程序端会报错 TypeError: Cannot read property 'localStorage' of undefined 其实这里也就是语法不兼容

在每个store JS文件都可以配置

// 可选：持久化插件（如使用 localStorage） persist: true,
直接改成
persist: {
storage: {
setItem(key, value) {
uni.setStorageSync(key, value)
},
getItem(key) {
return uni.getStorageSync(key)
},
}
}

即可解决问题