最近在写vue3应用时遇到了切换组件，但是还要保留原组件的数据的场景。所以需要选择一个全局存储数据的方法。而在vue3中，比较常用的全局存储数据的方法包括：
1.官方推荐的pinia。
2.vueUse中的createGlobalState。
下面我们举例讲解pinia，作为vue3官方推荐的存储，有很多扩展插件和扩展功能，但是本文中只例举基本用法：
pinia
基本使用如下：
store/user.js
import { defineStore } from "pinia"
export const useUser = defineStore("user", {
// 相当于data
state: () => {
return {
// 所有这些属性都将自动推断其类型,如果推断失败可以试下 as xxx
userId: 0
}
},
// 相当于计算属性
getters: {
getUserId: (state) => {
return state.userId
}
},
// 相当于vuex的 mutation + action，可以同时写同步和异步的代码
actions: {
setUserId(id: number) {
this.userId = id
}
}
})
component.js
import {useUser} from '@/store/user'
const userStore=useUser()
//设置user的id
userStore.setUserId()
//获取user的id
let userId = userStore.getUserId
createGlobalState
createGlobalState方法分成两种情况，一种是把数据存储在内存中，第二种是把数据存储在localStorage中。两种方法同样能够做到动态更新模板，区别只在于刷新页面后，数据是否还能使用。而且使用保存在localStorage中的方法更为简洁，只要两行代码，缺点是占用存储空间，并且不能自动清空：
下面先来看保存在内存中的方式:
store/user.js
import { createGlobalState } from "@vueuse/core"
export const useUserId = createGlobalState(() => {
//state
const id = ref(0)
//actions
function setId(idValue){
id.value = idValue
}
return { id, setId}
})
component.js
<template>
<input v-model="userId.id.value" />
{{userId.id.value}}
</template>
<script lang="ts" setup>
import {useUserId} from '@/store/user'
const userId=useUserId()
</script>
再看保存在localStorage中的方式:
store/user.js
import { createGlobalState, useStorage } from "@vueuse/core"
export const useUserId = createGlobalState(() => useStorage("user-id", ""))
component.js
<script lang="ts" setup>
import {useUserId} from '@/store/user'
const userId=useUserId()
//赋值
userId.value=id
//取值
let id=userId.value
</script>
