Vue3 纯JS单文件使用Pinia 数据共享 方法封装

介绍

一般情况下是在Vue文件里面使用Pinia,但有时候会在单js文件去封装一下全局的方法。

Pinia

文件结构:src/store/modules/user.js

javascript 复制代码
import { ref } from 'vue'
import { defineStore } from 'pinia'
import { selectUserMessage } from '@/api/user/user'
import { setSessionToken, getSessionToken } from '@/uilts/user'
export default defineStore("user", () => {

    const token = ref(getSessionToken())
    const userMsg = ref({})
    setUser()
    
    
    function setUser() { //获取用户信息
        if (token.value == null) { return }
        selectUserMessage().then(r => {
            userMsg.value = r.data
        })
    }
    
    function updateUserMessage() //更新用户信息
    {
        selectUserMessage().then(r => {
            userMsg.value = r.data
        })
    }
    
    return {
        token,   
        userMsg,
        updateUserMessage
    }
})

封装JS

把updateUserMessage封装成单条调用

javascript 复制代码
import userUser from '@/store/modules/user'
export function updateUserMessage() {
    const userStore = userUser()
    //这句一定要在里面
    userStore.updateUserMessage()
}//更新用户信息
相关推荐
小高0072 分钟前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
烛阴2 分钟前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
Samsong2 分钟前
JavaScript逆向之反制无限debugger陷阱
前端·javascript
skykun3 分钟前
今天你学会JS的类型转换了吗?
javascript
Lotzinfly4 分钟前
8 个经过实战检验的 Promise 奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
RoyLin5 分钟前
TypeScript设计模式:单例模式
前端·后端·node.js
小公主5 分钟前
我的第一个 React Flow 小实验
前端
RoyLin8 分钟前
TypeScript设计模式:工厂方法模式
前端·后端·node.js
掘金酱10 分钟前
🎉 2025年8月金石计划开奖公示
前端·人工智能·后端