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开发。
微信号:zstxinghui
更欢迎大家使用我的APP
1、松鼠天气,简洁的天气预报,节日日历工具。
2、陪诊小程序,家政小程序等行业小程序。