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

Pinia管理用户数据

article 2024/12/3 2:28:53

Pinia 是 Vue3 的新一代状态管理库，提供了更简单的 API 和更好的 TypeScript 支持。它作为 Vuex 的替代方案，成为了管理 Vue 应用状态的首选。Pinia 是 Vue3 的新一代状态管理库。与 Vuex 相比，Pinia 提供了更简单的 API、更好的性能，并且完全支持 Vue3 的组合式 API 和 TypeScript。Pinia 的设计理念是尽量简化状态管理，减少不必要的复杂性，使开发者能够专注于业务逻辑的实现。
这篇文章用来记录怎样使用Pinia实现保存用户数据。

首先新建一个useStore.ts文件

import { defineStore } from 'pinia'
import { ref } from 'vue'
import { loginAPI } from '@/apis/user';

export const userStore = defineStore('user', () => {
    // 定义数组
    const userInfo= ref({})
    // 获取数据
    const getUserInfo = async ({account, password}) => {
        const res = await loginAPI({account, password})
        userInfo.value = res.result
    }
    // 返回数据
    return {
        userInfo,
        getUserInfo
    }
},{
	// 数据持久化
    persist: true
})

在main.ts中配置
要想实现持久化需要安装pinia-plugin-persistedstate插件

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import App from './App.vue'
import router from './router'

// 引入初始化样式文件
import '@/styles/common.scss'
// 引入图片延迟加载
import { lazyPlugin } from '@/directives/index'
// 引入全局组件
import { componentPlugin } from '@/components'
// pinia 持久化

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

app.use(pinia)
app.use(router)
// 使用图片延迟加载插件
app.use(lazyPlugin)
app.use(componentPlugin)

app.mount('#app')