uniapp中pinia（setup语法）使用流程

uniapp中pinia（setup语法）的使用流程

一、安装pinia

bash 复制代码

pnpm install pinia

二、配置pinia并在项目中引入

在main.js中配置pinia

javascript 复制代码

import {createSSRApp} from "vue"; //可以创建实例
import pinia from './stores' 
import App from "./App.vue";
export function createApp() {
	const app = createSSRApp(App); // 创建一个vue实例
	app.use(pinia)  //注册pinia（将pinia注入vue实例中）
	return {
		app,
	};
}

三、使用pinia

创建stores文件夹，下方包含index.js和modules文件夹

index.js是各个store的入口文件，可以统一导出所有store
modules文件夹中存放的是多个独立的pinia store，可以为各个模块创建store存储数据

index.js

javascript 复制代码

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

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

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

各个模块的store

javascript 复制代码

import {defineStore} from 'pinia'
import {ref} from 'vue'

export const useUserStore = defineStore('user',
  ()=>{
    // 变量
    const profile = ref({
      token:'',
      userInfo:{},
      introduce:''
    })
    
    // 方法
    const setToken = (token)=>{
      profile.value.token = token
    }
    const setIntroduce = (introduce)=>{
      profile.value.introduce = introduce
    }
    const setProfile = (profileValue)=>{
      profile.value.userInfo = profileValue
    }
    const delProfile = ()=>{
      profile.value = {}
    }
    
    // 必须要返回出去
    return {
      profile,
      setToken,
      setIntroduce,
      setProfile,
      delProfile
    }
  },
  {
    // 持久化 小程序端配置
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          return uni.setStorageSync(key, value)
        },
      },
    },
  }
)

defineStore函数结构

四、pinia持久化（各个端如何实现）

没有持久化，用户每次打开应用都是 "全新的初始状态"；有了持久化，用户的登录状态、购物车、个性化设置才能 "记住"，这是绝大多数应用的基础需求。

persist介绍

网页端 和App端

javascript 复制代码

import {defineStore} from 'pinia'
import {ref} from 'vue'

export const useUserStore = defineStore('user',
  ()=>{
    // 变量
    const profile = ref({
      token:'',
      userInfo:{},
      introduce:''
    })
    
    // 方法
    const setToken = (token)=>{
      profile.value.token = token
    }
    const setIntroduce = (introduce)=>{
      profile.value.introduce = introduce
    }
    const setProfile = (profileValue)=>{
      profile.value.userInfo = profileValue
    }
    const delProfile = ()=>{
      profile.value = {}
    }
    
    // 必须要返回出去
    return {
      profile,
      setToken,
      setIntroduce,
      setProfile,
      delProfile
    }
  },
  {
    // 持久化 小程序端配置
    persist:true
  }
)

微信小程序端

由于persist默认使用的是localStorage，而小程序使用的是getStorageSync和setStorageSync所以需要重新配置。

javascript 复制代码

import {defineStore} from 'pinia'
import {ref} from 'vue'

export const useUserStore = defineStore('user',
  ()=>{
    // 变量
    const profile = ref({
      token:'',
      userInfo:{},
      introduce:''
    })
    
    // 方法
    const setToken = (token)=>{
      profile.value.token = token
    }
    const setIntroduce = (introduce)=>{
      profile.value.introduce = introduce
    }
    const setProfile = (profileValue)=>{
      profile.value.userInfo = profileValue
    }
    const delProfile = ()=>{
      profile.value = {}
    }
    
    // 必须要返回出去
    return {
      profile,
      setToken,
      setIntroduce,
      setProfile,
      delProfile
    }
  },
  {
    // 持久化 小程序端配置
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          return uni.setStorageSync(key, value)
        },
      },
    },
  }
)