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()
}//更新用户信息
相关推荐
纵有疾風起27 分钟前
C++——类和对象(3)
开发语言·c++·经验分享·开源
Full Stack Developme36 分钟前
java.text 包详解
java·开发语言·python
文火冰糖的硅基工坊1 小时前
[嵌入式系统-135]:主流AIOT智能体开发板
开发语言·嵌入式·cpu
哆啦A梦15881 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_1 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD1 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
yudiandian20142 小时前
02 Oracle JDK 下载及配置(解压缩版)
java·开发语言
要加油哦~2 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
鄃鳕2 小时前
python迭代器解包【python】
开发语言·python
new coder2 小时前
[c++语法学习]Day10:c++引用
开发语言·c++·学习