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()
}//更新用户信息
相关推荐
北城以北8888几秒前
ES6(二)
前端·javascript·es6
科兴第一吴彦祖几秒前
基于Spring Boot + Vue 3的乡村振兴综合服务平台
java·vue.js·人工智能·spring boot·推荐算法
朕的剑还未配妥14 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端
墨鱼鱼19 分钟前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
渣哥19 分钟前
多环境配置利器:@Profile 在 Spring 项目中的实战价值
javascript·后端·面试
携欢22 分钟前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
Knight_AL24 分钟前
浅拷贝与深拷贝详解:概念、代码示例与后端应用场景
android·java·开发语言
枫叶丹426 分钟前
【Qt开发】输入类控件(六)-> QDial
开发语言·qt
什么芋泥香蕉33030 分钟前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦31 分钟前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt