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()
}//更新用户信息
相关推荐
自动花钱机1 分钟前
ESLint语法报错
前端·javascript·vue.js·css3·html5
weixin_307779138 分钟前
C#实现HiveQL建表语句中特殊数据类型的包裹
开发语言·数据仓库·hive·c#
難釋懷15 分钟前
JavaScript基础-移动端常用开发插件
开发语言·javascript·ecmascript
予安灵22 分钟前
XSS 攻击(详细)
前端·web安全·网络安全·网络攻击模型·xss·安全架构·xss攻击
工业互联网专业25 分钟前
基于springcloud微服务架构的巡游出租管理平台
java·vue.js·spring cloud·微服务·毕业设计·源码·课程设计
阿巴阿巴拉34 分钟前
Scala相关知识总结3
开发语言·python
好_快35 分钟前
Lodash源码阅读-cloneArrayBuffer
前端·javascript·源码阅读
╰つ゛木槿36 分钟前
Vue与React区别分析
前端·vue.js·react.js
thinkQuadratic36 分钟前
vue修饰符
前端·javascript·vue.js
不吃香菜的猪36 分钟前
el-dialog实现遮罩层后面的内容也能点击
前端·javascript·vue.js