当前位置：首页 > news >正文

uni-app开发微信小程序 vue3写法添加pinia

news 2025/8/9 2:37:26

说明

使用uni-app开发，选择vue3语法，开发工具是HBliuderX。虽然内置有vuex，但是个人还是喜欢用Pinia，所以就添加进去了。
Pinia官网连接

添加步骤

第一步：

在项目根目录下执行命令：

npm install pinia

第二步：

配置main.js文件

// #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

第三步，使用：

创建store文件夹、创建store/index.js

import {appStore
} from "./modules/app.js"const useStore = () => ({app: appStore(),
});export default useStore;
/*** 用法* 	import useStore from "@/store/index.js"const {app} = userStore();let app = app.appIndex*/

然后创建store/modules/app.js文件

import {defineStore
} from 'pinia'
export const appStore = defineStore('app', {unistorage: true, // 是否持久化到内存state: () => {return {// 测试appIndex: 999,}},actions: {}
})

像下面这个样子：
在这里插入图片描述

使用：

在js文件夹下导入使用即可

import useStore from "@/store/index.js"const {app} = userStore();let app = app.appIndex

完整一点的示例：

<script>import useStore from "@/store/index.js"const {app} = useStore();export default {data() {return {text:"",}},methods: {getText(){this.text = app.appIndex;}}
</script>