uniapp-Pinia使用

Pinia介绍

• 首先我们必须知道的一点就是，在HBuilder X 搭建的uniapp3的项目之中，已经自己携带了pinia,自带的,也就是说热度特别高！
• 官方提供的 uni-app3内置了 Pinia 。但是 uniapp Vue 2 项目暂不支持 uniapp2 还是建议使用vuex 状态管理库，也蛮好用的

版本要求

需要注意的是： 搭建方式不同，Pinia的使用方式不同！

uniapp使用Pinia

（1） HBuilder X 搭建使用Pinia

uni-app已经内置了vuex和pinia两个状态管理，不需要安装即可使用

不需要手动安装，直接使用即可

这里不得不称赞一下HbuildX开发者工具虽然难用一些，但是确实也在努力做！

（2）使用 CLI搭建使用Pinia

使用 CLI搭建的项目则是需要自己去手动安装

执行命令行安装

`yarn add pinia@2.0.33` 

或 `npm install pinia@2.0.33`

（3）安装pinia(上面没成功！！)

yarn add pinia

uniapp中配置Pinia

根目录下面去修改我们的main.js

mian.js 引用并使用pinia

先看看如何引入挂载然后使用 pinia

写到我们的main.js 文件夹之中

//导入pinia
import * as Pinia from  'pinia'
 
// 创建Pinia实例  // 将pinia实例挂载到vue实例上 
app.use(Pinia.createPinia());
 
return {
    app,
    Pinia, // 此处必须将 Pinia 返回
}

处理报错

这里我们尝试运行，一直报错Pinia is not defined

之前我们写的返回里面是有个返回的pinia，这里我们更正一下试试

import { createPinia } from 'pinia';
export function createApp() {
  const app = createSSRApp(App)
   const pinia = createPinia();
  app.use(pinia); // 创建Pinia实例  // 将pinia实例挂载到vue实例上 
  return {
    app,
    pinia, // 此处必须将 Pinia 返回
  }
}

把上面最后那个pinia给去掉，然后尝试一下

配置store里面的 user.js

在根目录下面新建store文件夹，然后文件夹下面新建user.js 文件

看一下我们的目录结构

store=>modules=>user.js

这里我们可以先简单的尝试一下

user.js 文件里面我们先简单的写一些登录的状态

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    username: '',
    isLoggedIn: false,
  }),
  actions: {
    login(name) {
      this.username = name;
      this.isLoggedIn = true;
	  console.log('login登录',this.isLoggedIn);
    },
    logout() {
      this.username = '';
      this.isLoggedIn = false;
	  onsole.log('退出登录',this.isLoggedIn);
    }
  },
  getters: {
    userStatus: (state) => {
      return state.isLoggedIn ? `Welcome, ${state.username}` : 'Please log in';
    }
  }
});

登录界面使用

（1）页面编写

接下来我们简单写个登录界面尝试一下我们的pinia的使用

page文件夹下面的component里面写一个login文件下，下面新建一个index.vue文件用来登录

<template>
  <view class="container">
    <input v-model="username" type="text" placeholder="请输入用户名" />
    <input v-model="password" type="password" placeholder="请输入密码" />
    <button @click="login">登录</button>
    <text class="error-message">{{ errorMessage }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const username = ref('');
const password = ref('');
const errorMessage = ref('');

const login = () => {
  // 这里可以编写登录逻辑，例如向服务器发送请求验证用户名和密码
  if (username.value === 'admin' && password.value === 'password') {
    // 登录成功的处理
    errorMessage.value = '';
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    });
    // 可以进行页面跳转或其他操作
  } else {
    // 登录失败的处理
    errorMessage.value = '用户名或密码错误';
  }
};
</script>

<style scoped>
.container {
  padding: 40rpx;
  box-sizing: border-box;
}

input {
  width: 100%;
  padding: 0 20rpx;
  margin-bottom: 40rpx;
  border: 2rpx solid #ccc;
  border-radius: 8rpx;
  box-sizing: border-box;
  line-height: 80rpx;
  height: 80rpx;
}

button {
  width: 100%;
  padding: 0 20rpx;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.error-message {
  color: red;
  margin-top: 10px;
}
</style>

简单看一下我们的界面

接下来我们就在页面之中简单的使用一下这个pinia搭建的store仓库，然后输入看看其中有哪些信息。

 // 导入我们搭建的仓库
 import { useUserStore } from '@/store/user';
 
 // 使用一下我们的仓库 
 const userStore = useUserStore();
// 打印看一下我们的状态仓库之中有些什么信息
console.log(userStore,'userStore');

点击一下我们的登录，然后我们查看一下其中有哪些信息，查看我们是否可以正常的调用这个状态库

const login = () => {
    userStore.login(username.value);
};

点击一下我们的登录模块

登录
login登录 true

这里我们可以看到我们已经可以正常拿到我们的登录状态

（2）切换登录授权

接下来我们对于我的界面，或者在点击事件之中做一个判断，如果我们处于登录状态，那么可以访问我的界面

处于为登录界面，则访问我的界面的时候，必须去进行登录

先去完善一下我们的登录

const login = () => {
	console.log('登录');
	userStore.login(username.value);
	uni.switchTab({
		url:'/pages/tabBar/index/index'
	})
};

import { useUserStore } from '@/store/user';

 // 使用一下我们的仓库 
 const userStore = useUserStore();

// 打印看一下看看我们的状态仓库之中登录信息是否已经登录
console.log(userStore,'userStore---点击查看登录信息');

true userStore一点击时候的登陆状态"
index:4

我们可以看到，这边点击登录以后，我们再次进行切换的时候，用户已经登录。

这里我们完善一下用户是否登陆的逻辑。

if(userStore.isLoggedIn){
    console.log('用户已经登陆！');
    uni.switchTab({
        url: '/pages/tabBar/user/user'
    })
}else{
    console.log('用户未登陆！');
    uni.navigateTo({
        url:'/pages/component/login/login'
    })
}

完善的是点击按钮切换页面时候的逻辑，然后我们看一下效果！

点击我的 ，用户未登录，去登录页面！

用户已经登录，直接去我的界面！

从表面上来看，我们的逻辑应该不存在任何问题，接下来我们尝试一下

（3）解决状态问题

上面正确的判断应该是将if(userStore.isLoggedIn) 换成 if(userStore.isLoggedIn) ，ok，我们尝试一下啊

正确无误，功能ok！

pinia持久化依赖

（1）刷新问题

false"userStore---*
一点击时候的登陆状态
index:4
false "userStore.isLoggedIn---1"
false"userStore.isLoggedInx-333
用户未登陆！

这里我们每次进行刷新的时候都需要重新登陆，主要原因是因为我们没有进行持久化存储，我们先对于pinia进行持久化存储的设置

（2）安装pinia持久化依赖

yarn add pinia-plugin-persistedstate

store文件夹下面新建一个index.js文件，在这之中添加pinia的持久化存储

引入我们持久化存储的依赖，然后使用这个持久化存储就可以

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

//创建pinia实例
const pinia = createPinia()
//使用持久化存储插件
pinia.use(persist)

//默认导出 给main.ts使用
export default pinia

（3）在main.js文件之中进行配置

//导入pinia
import store from '@/store/index.js'
app.use(store); // 创建Pinia实例  // 将pinia实例挂载到vue实例上

再次刷新点击，这个时候我们的状态已经存储进去了，并且重新点击也不会进行刷新，状态进行了保存！