Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态。实际上，pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex。

uni-app 使用Pinia

uni-app 内置了 Pinia 。Vue 2 项目暂不支持

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

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';       // 配置pinia第一句

export function createApp() {
  const app = createSSRApp(App)
  
  // 状态管理
	const store = Pinia.createPinia();	// 配置pinia第二句
    // 持久化
    app.use(store);						// 配置pinia第三句

  return {
    app,	
    Pinia								// 配置pinia第四句
  }
}
// #endif

特别注意的位置，放其他地方可能导致引入失败

import * as Pinia from 'pinia'; 

至此pinia导入成功。

创建一个store文件夹，和一个userColorStore.js文件，测试一下刚刚配置的pinia

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

export const userColorStore = defineStore("color", (v) => {
	const color = ref('red');
	const setColor = v =>{
		color.value = v;
	}
	
	return {color,setColor}
})

在pages/index/index.vue文件中运行一下刚刚写的代码

import { userColorStore } from '../../store/userColorStore';

	const colorStore = userColorStore()
	
	const setColor = ()=>{
		colorStore.setColor("blue")
	}

<template>
	<button @tap="setColor()">{{colorStore.color}}</button>
</template>

这是pinia简单的一个测试样例。

创业举步维艰，感谢各位支持

欢迎大家阅读我的创业笔记，如果你觉得这篇写得不错的话，可以关注我的公众号： 成长创业笔记 第一时间查阅我们的文章！感谢大家的支持。

欢迎大家下载使用我们的安卓APP：

• ● 松鼠驾考：驾考刷题APP，新版的驾考题目内容持续更新。
• ● 松鼠天气：简洁的天气预报，日历工具
• ● 加我微信：zstxinghui

成长创业笔记