uniapp中怎样配置pinia

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、陪诊小程序,家政小程序等行业小程序。

程序员小张
世界上只有一种真正的英雄主义,就是认清了生活的真相后还依然热爱生活。
随机文章
MySql唯一性约束设置以及实际应用
2024-06-12 15:40:26
开发者周记8:家政小程序终于出来了
2024-07-05 18:11:38
从打工到创业,这一路还是非常的坎坷
2024-08-24 19:19:01
成长创业周记14:小程序管理后台开发
2024-11-23 17:15:47
解决vscode无法运行npm命令
2025-01-23 14:09:31