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简单的一个测试样例。
