在组件外使用pinia的坑

news2024/11/20 2:28:37

来源

项目包含很多静态的类型,我新建了一个js来专门管理和使用这些类型,如下图这种,有一部分是固定的,千年不变,有一部分是偶尔会变(需要后台获取),还有一部分是要登录后才能拿到的。
在这里插入图片描述


于是乎,我准备在这里写一个类似hook之类的东西,在登录后再去请求这些数据,结果就报错了。

下附代码和报错

import { useAuthStore } from '@/store'

export const visitType = {
    1:"复查邀约",
    2:"未成交跟踪",
    3:"潜客跟踪",
    4:"积分兑换",
    5:"沉睡客户"
}
const authStore = useAuthStore()

在这里插入图片描述

解决

很明显,看报错就知道了,压根就没找到useAuthStore这个状态机,很有可能是在pinia还没初始化之前就去引用了

我们调试下看看
main.js入口文件的头部和尾部都加上console.log,在我们新建的用来管理状态数据的staticTypes.js文件也加上console.log,看一下输出内容。

如下图,这个staticTypes.js运行的都要比main.js要早,获取不到useAuthStore属实正常,
在这里插入图片描述
我们只需要在staticTypes.js添加一个init函数,然后再main.js里初始化pinia之后去运行这个init函数就可以了。

然后就可以在init函数中做一系列初始化操作了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1707448.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

广告界的奥斯卡:揭秘成功广告策划的核心要素

在这个品牌林立、竞争激烈的市场大潮中,想要让自己的品牌声音被听见,一个成功的广告策划无疑是你的超级扩音器。 一个成功的广告策划一般来说需要以下十大要素: 1. 明确的目标和受众定位:你的指南针 首先,咱们得有个…

three.js能实现啥效果?看过来,这里都是它的菜(08)

在Three.js中实现旋转动画的原理是通过修改对象的旋转属性来实现的,通常使用渲染循环(render loop)来更新对象的旋转状态,从而实现动画效果。 具体的原理包括以下几个步骤: 创建对象:首先创建一个需要旋转…

网络——多区域OSPF配置(OSPF系列第1篇)

简介 路由协议OSPF全称为Open Shortest Path First,也就开放是的最短路径优先协议,使用链路状态路由算法,isis协议也是使用链路状态路由算法。而RIP协议使用距离矢量路由算法。 区域 为了能够降低OSPF计算的复杂程度,OSPF采用分…

【全开源】班级管家微信小程序(FastAdmin+ThinkPHP)

班级管家微信小程序 班级管家微信小程序,作为一款专注于家校沟通、作业管理、成绩发布等方面的工具,凭借其丰富的特色功能和显著的优势,已经成为广大教师、家长和学生日常学习生活中不可或缺的一部分。 一、特色功能 家校沟通便捷&#xff…

JD3-40/23漏电继电器 AC220V 50-500mA 0.1s 导轨安装

系列型号: JD3-40/13漏电继电器JD3-40/23漏电继电器JD3-40/33漏电继电器JD3-40/43漏电继电器 JD3-70/13漏电继电器JD3-70/23漏电继电器JD3-70/33漏电继电器JD3-70/43漏电继电器 JD3-100/23漏电继电器JD3-100/43漏电继电器JD3-100/33漏电继电器JD3-100/13漏电继电…

CRMEB开源商城系统:全开源、高灵活性的电商解决方案

一、引言 随着电子商务的飞速发展,越来越多的企业和个人开始关注如何快速搭建一个稳定、高效且功能丰富的在线商城系统。在这样的背景下,CRMEB开源商城系统应运而生,凭借其前后端分离的架构、丰富的功能模块以及易用性,成为了众多…

快写猪好用吗 #知识分享#笔记#学习方法

快写猪是一个非常好用的论文写作工具,它提供了强大的查重降重功能,帮助用户轻松完成论文写作任务。无论是在学术研究还是日常写作中,快写猪都能提供高效、准确的检测,确保文本的原创性和质量。 首先,快写猪的查重降重功…

uniapp 使用vuex 在app上能获取到state,小程序获取不到

1. 在根目录下新建store目录, 在store目录下创建index.js定义状态值import Vue from vue; import Vuex from Vuex; import Vuex from vuex; Vue.use(Vuex);const store new Vuex.Store({ state: { login: false, token: , avatarUrl: , userName: }, mutations: { lo…

Android环境下Mesa初始化流程重学习之eglCreateContext

Mesa初始化流程重学习之eglCreateContext 引言 没有啥好说的了,直接上手撸代码!总得找点事情干不是!我打工我快乐!我奋斗,我快乐! 一. 核心结构体之间的关联 二. eglCreateContext流程分析 eglCreateContext(...)//s…

JavaWeb_SpringBootWeb

先通过一个小练习简单了解以下SpringBootWeb。 小练习: 需求:使用SpringBoot开发一个Web应用,浏览器发起请求/hello后,给浏览器返回字符串"Hello World~"。 步骤: 1.创建SpringBoot项目,勾选We…

杨若歆发布最新单曲《迷雾之谜》从啦啦女神到音乐新星的华丽转身

5月28日,台北——杨若歆,这位被粉丝封为"啦啦女神"的多才多艺艺人,近日推出了她的最新单曲《迷雾之谜》,这首歌曲以其空灵的旋律和杨若歆独特的高音,迅速在歌迷中引起了热烈的反响。 杨若歆,身高…

【算法】递归、搜索与回溯——汉诺塔

题解:汉诺塔(递归、搜索与回溯算法) 目录 1.题目2.题目背景(拓展了解)3.题解4.参考代码5.细节6.总结 1.题目 题目链接:LINK 2.题目背景(拓展了解) 汉诺塔问题是一个通过隐式使用递归栈来进行实现的一个经典问题,该问题最早的发明人是法国…

linux系统——bg命令,linux运行的级别

在linux中可以使用bg命令,将进程任务置于后台执行 在这里,使用ping www.baidu.com命令后再使用ctrlz,可以将命令先暂停并保留在后台,jobs可以对任务进行查看 使用runlevel可以查看系统当前的运行级别

解决npm卡死,无法安装依赖

npm卡死,无法安装依赖 异常描述原因分析与解决方法 异常描述 1.无法进入命令行,或是很慢没反应 2.装表格无限滚动的el-table-infinite-scroll依赖一上午了,也不能装,报错提示 原因分析与解决方法 1.命令行的问题:缓…

【头歌】计算机网络DHCP服务器配置第二关access口配置答案

头歌计算机网络DHCP服务器配置第二关access口配置操作步骤 任务描述 本关任务:创建 vlan ,并且将与 pc 机相连接口划分 vlan 。 操作要求 在第一关的拓扑图的基础上,配置交换机,具体要求如下: 1、在特权模式下进入 vla…

开源VS闭源:谁更能推动AI技术的普及与发展?

一、引言 在人工智能(AI)技术的浪潮中,开源与闭源两种模式一直并存,并各自在推动AI技术普及与发展上发挥着重要作用。然而,关于哪种模式更能有效地推动AI技术的普及与发展,一直存在着激烈的讨论。本文将深…

【前端工程化指南】Git常见操作之协作相关操作

获取远程仓库的更新 我们可以使用 git fetch 或者 git pull 两个命令从远程仓库获取最新的提交和分支信息,两者区别如下: git fetch:该命令将远程仓库的最新更改下载到本地,但不会自动合并到当前分支。你可以随后使用其他命令&a…

电子围栏(地理围栏)设计逻辑

做完整的项目时需要考虑安全问题,判断车辆在不该出现的位置出现时自动刹车。 只能说可以有吧。 地理围栏的概念 自动驾驶地理围栏是指在自动驾驶系统中定义的一种虚拟边界,用于限制车辆的运行范围。地理围栏可以通过全球定位系统(GPS&#…

超详细Lambda表达式与Stream流及Maven环境搭配

目录 1.什么是Lambda表达式 2.为什么使用Lambda表达式 3.Lambda表达式语法 4.语法糖 5.Stream流 5.1stream流是什么 特点 5.2为什么要用Stream 5.3Stream流中的静态方法 6.Maven(项目编译打包软件) 6.1什么是Maven 6.2为什么要使用Maven 6.3Maven 中的相关概念 6.…

Android应用开发之AndroidManifest.xml

一.AndroidManifest.xml介绍 1.定义 AndroidManifest官方解释是应用清单(manifest意思是货单),每个应用的根目录中都必须包含一个,并且文件名必须一模一样。 它是Android程序的全局配置文件,是每个 android程序中必须…