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()
}//更新用户信息
相关推荐
武昌库里写JAVA12 小时前
Mac下Python3安装
java·vue.js·spring boot·sql·学习
代码的余温12 小时前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯13 小时前
日常小常识记录
前端
那一抹阳光多灿烂13 小时前
CSS 编码规范
前端·css
degree52013 小时前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
૮・ﻌ・13 小时前
CSS高级技巧---精灵图、字体图标、布局技巧
前端·css
昔人'13 小时前
纯`css`固定标题并在滚动时为其添加动画
前端·css
超人不会飛13 小时前
Vue markdown组件 | 流式 | 大模型应用
前端·javascript·github
小白640213 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·css·html
怀旧,13 小时前
【C++】20. unordered_set和unordered_map
开发语言·c++