Vue3 使用Pinia 存入与取出数据

Pinia简介

Pinia 就是一个实现了上述需求的状态管理库，由 Vue 核心团队维护，对 Vue 2 和 Vue 3 都可用。

现有用户可能对 Vuex 更熟悉，它是 Vue 之前的官方状态管理库。由于 Pinia 在生态系统中能够承担相同的职责且能做得更好，因此 Vuex 现在处于维护模式。它仍然可以工作，但不再接受新的功能。对于新的应用，建议使用 Pinia。

事实上，Pinia 最初正是为了探索 Vuex 的下一个版本而开发的，因此整合了核心团队关于 Vuex 5 的许多想法。最终，我们意识到 Pinia 已经实现了我们想要在 Vuex 5 中提供的大部分内容，因此决定将其作为新的官方推荐。

相比于 Vuex，Pinia 提供了更简洁直接的 API，并提供了组合式风格的 API，最重要的是，在使用 TypeScript 时它提供了更完善的类型推导。
pinia核心概念是 state、actions、getters、modules、plugins

在页面中存入数据 authType

import { auth } from "@/store/auth";
const store = auth()

store.$state.userDetailsDto.authType = '02'
1
2
3
4

在页面中拿出pinia中的值authType

import {  onMounted } from 'vue'
import { auth } from "@/store/auth";
const store = auth()

onMounted(() => { 
  console.log('获取',store.$state.userDetailsDto.authType)
})
1
2
3
4
5
6
7
8