关于vue3的pinia的使用_vue3 ts store pinia 里只能有一个export吗-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36566924/article/details/130624205

文章介绍了如何在Vue项目中利用Pinia创建和管理store，包括在/src/pinia下设置主文件和各个特定store，如user.ts，以及如何在组件中引用和响应store数据的变化，特别提到在页面上响应Pinia变化的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.定义

/src/pinia下创建一个主文件index.ts

import { createPinia } from "pinia"

export const store = createPinia()

在mian.ts中挂载主文件

import { createSSRApp } from "vue"
import App from "./App.vue"
import { store } from "./store"

export const createApp = function () {
	const app = createSSRApp(App).use(store)
	return {
		app
	}
}

在/src/pinia下创建需要创建的store，比如创建一个user.ts

import { defineStore } from "pinia"
interface UserStoreState{
	sysInfo : AnyObject,		//获取手机部分信息
}

export const useUserStore = defineStore("userStore", {		//全局的缓存
	state: () : UserStoreState=> ({
		sysInfo: {},
		
	}),

	actions: {
		setSysInfo(sysInfo : AnyObject) {
			this.sysInfo = sysInfo
		},
	},
})

二.引用

import { useUserStore } from "@/store/user"

const userStore = useUserStore()

userStore.setSysInfo('你的数据');

//取数据直接读取就好

console.log(userStore.sysInfo)

tips：

1.如果想在页面上响应pinia的变化，需要

let payLoading = ref(computed(() => {

return globalStore.payLoading

}));

这样才能相应到，直接在页面写{{globalStore.payLoading}}是无法响应的