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

news2024/11/30 6:54:22

说明

使用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>