第一步：配置pinia （main.js）

pinia 不用安装，框架自带了，直接导入就行了

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';
export function createApp() {
  const app = createSSRApp(App)
  const store = Pinia.createPinia()
  app.use(store)
  return {
    app,
    Pinia
  }
}
// #endif

第二步：项目根目录新建一个store(随便取一个名称都行)文件夹，在此文件夹里新建一个pinia模块js,例如：user.js

// user.js
import { defineStore } from 'pinia';
export const useAppStore = defineStore('user', {
  state: () => {
      return {
          userInfo: {},
          isLogin: false,
      }
  },
  getters: {
     app_userInfo: (state) => state.userInfo,
     app_isLogin: (state) => state.isLogin
  },

  actions: {
    // 设置数据
    async setData(key,data){
      this[key] = data
    },
    // 获取数据
    getData(key){
      return this[key]
    },
  }
});

第三步：在页面中使用

script中使用

<script setup>
    import { useAppStore } from '@/store/user';
    const appStore = useAppStore();
    // 设置用户信息（自定义函数设置数据）不喜欢这种方式的，可以用正经的方式设置，反正都是传参进去赋值
    appStore.setData('userInfo', {
        name: '张三',
        age: 18
    });
    
    // 获取userInfo==actions自定义函数方式获取
    let userInfo1 = appStore.getData('userInfo');
    // 获取userInfo==getters方式获取
    let userInfo2 = appStore.user_userInfo;
    
</script>

template中使用

<template>
    <view class="content">
        <view class="">
            <!-- getters方式 -->
            {{appStore.user_userInfo}}
        </view>
        <view class="">
            <!-- actions自定义函数方式 -->
            {{appStore.getData('userInfo')}}
        </view>
        
    </view>
</template>

数据持久化

安装这个持久化插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

yarn add pinia-plugin-persistedstate

pnpm i pinia-plugin-persistedstate

修改一下main.js代码

// #ifdef VUE3
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';
import { createPersistedState } from 'pinia-plugin-persistedstate' //引入持久化插件
// 写个方法，配置一下持久化插件
const createPersistUni = () => {
    return createPersistedState({
        storage: {
            getItem: uni.getStorageSync,
            setItem: uni.setStorageSync
        }
    })
}
export function createApp() {
  const app = createSSRApp(App)
  const store = Pinia.createPinia()
  // 使用持久化插件
  store.use(createPersistUni());
  app.use(store)
  return {
    app,
    Pinia
  }
}
// #endif

再修改一下user.js里的代码 增加这个字段 persist: true

import {
    defineStore
} from 'pinia';
export const useAppStore = defineStore('user', {
    state: () => {
        return {
            userInfo: {},
            isLogin: false,
        }
    },
    getters: {
        user_userInfo: (state) => state.userInfo,
        user_isLogin: (state) => state.isLogin
    },
    actions: {
        // 设置数据
        async setData(key, data) {
            this[key] = data
        },
        // 获取数据
        getData(key) {
            return this[key]
        },
    },
    persist: true //  开启持久化
});

好了，完事儿了