nuxtjs如何在单独的js文件中引入store和router
nuxtjs里面集成vuex的创建方式改变了,并且官方不建议以导出Vuex实例的方式创建store,并且会在nuxt3里面删除。这样就会存在一个问题,我怎么像普通vue spa项目一样直接 import store from '@/store'呢?
虽然官方建议为这个js写一个plugins,然后在 plugins 里面使用
export default ({ app, $axios, store, route, redirect }) => {
  ...
}
虽然这里面确实可以获取到,大多数情况也确实该如此。但是总有那么些异常情况需要在单独js里面引用怎么办呢?而我也确实遇到了,因为项目之前以spa形式,后来要做平台化,需要依赖seo,那么只能转为ssr渲染。项目也不小,包含的内容非常多,整体转为ssr,又没有足够的时间周期,那么肯定是越平滑过渡越好,尽量避免大量的改动。那么就确实遇到了这个问题,需要在单独js文件里引入store及router。
因为nuxt创建的 store 实例并没有 exports 出来,所以没法直接 import。之前尝试了很多方法,比如:
1、因为nuxt里的vuex创建方式是将state以函数导出,getters等也是直接导出,那么尝试
import { state } from '@/store/index.js'
// 用的时候就需要
state().pick
但是这种方式获取到的值始终是null,这显然是不对的。可能原因在于它导出的只是这个变量,而并不是这个store实例里的这个state,所以导致获取不到值,不知道理解是否正确。那么继续找方案。
2、网上查的:
可以 hack 一下,从组件中获取到 store 后赋值到一个地方保存起来
也可以写一个 plugin,在 plugin 执行的时候把 store 保存起来
没具体试过可不可行
3、实例初始化完毕以后 nuxt 会在 window 全局注入$nuxt ,通过$nuxt.$store 可以访问 store,$nuxt.$router 可以访问到router,但是需要注意的是,初始化完毕以前是无法访问$nuxt的,所以需要再初始化完毕之后才能使用该方法。
const store = $nuxt.$store
const router = $nuxt.$router
nuxtjs如何在单独的js文件中引入store和router的更多相关文章
- ASP.NET MVC  中单独的JS文件中获取Controller中设定的值
		
1,在Controller中的Action 中将指定值写上. // // GET: /Home/ public ActionResult Index() ...
 - window.location.href 放置在单独的JS文件中使用时问题
		
场景:假设当前浏览器地址栏的地址是:http://localhost:8888/SSHBoot/tourist/homeMainAction_signInUI.do, 现在我想在点击按钮时定位到“ht ...
 - 由js文件中引入另外的js文件想到的
		
1. html中,使用<script src="../static/js/xxx.js"></script>引入js文件. 2. 在js文件中,引入js ...
 - 使用Babel将单独的js文件 中的  ES6转码为ES5
		
如果你并没有接触过ES6,当你看到下面的代码时,肯定是有点懵逼的(这是什么鬼?心中一万头神兽奔腾而过),但是你没看错,这就是ES6.不管你看不看它,它都在这里. 1 2 3 4 5 6 7 8 9 ...
 - 如何在一个js文件中引入另外的js文件
		
例如想要在a.js中引用b.js.c.js和d.js document.write("<script language='javascript' src='b.js'></ ...
 - js文件中函数前加分号和感叹号是什么意思?
		
本文转自:http://blog.csdn.net/h_o_w_e/article/details/51388500 !function(){}(); !有什么用? 从语法上来开,JavaScri ...
 - 如何在js文件中实现获取request.getCotextPath();
		
我们在jsp中可以方便的使用“request.getCotext()”来获取工程的根目录. 但是如果我们的js代码存在一个单独的js文件中,这时候再想获取根目录,我们就要自己截取了.可以采用下面的方式 ...
 - JS文件中的中文在网页引用时显示乱码的简单解决方式
		
今天把一个jquery方法从前台cshtml文件转移到单独的js文件中后执行不成功,调试发现if判断中的中文字符串变成了乱码,之前在前台文件中是可以正常显示的,所以判定可能是跟文件的编码方式有关系. ...
 - js文件中使用el表达式问题
		
作者:Sang 单独js文件不能用el表达式. 首先,JSP是由服务端执行的,EL表达式自然也由服务端解析执行,因此如果EL所在的脚本在JSP页面内,它是可以获取到值的,这个值在服务器端返回到浏览器端 ...
 
随机推荐
- UWP 使用Launcher 启动迅雷
			
不得不说UWP有些地方真的不方便! 另外也要夸一下迅雷,还是蛮不错的! 代码 await Launcher.LaunchUriAsync(new Uri("magnet:?xt") ...
 - Python课程第六天作业
			
1.以自己的理解总结为什么会出现循环导入,并用代码举例说明 循环导入报错并不是应为相互之间引用而导致报错,实际上是在导入一个模块时发现引用的模块不存在 示例如下: m1.py from m2 impo ...
 - gitbub高效查找优秀项目
			
in:name example 名字中带有example的项目 in:readme example 在readme文件带有example的项目 in:description example 描述里 ...
 - 单片机成长之路(51基础篇) - 023 N76e003 系统时钟切换到外部时钟
			
N76e003切换到外部时钟的资料很少(因为N76e003的片子是不支持无源晶振的,有源晶振的成本又很高,所以网上很少有对N76e003的介绍).有图有真相: 代码如下: main.c #includ ...
 - win10家庭版添加本地策略
			
在桌面新建一个空文件夹(此处是需要新建文件夹而并非文件),文件夹的名称大家随意即可.如下图所示: 打开刚刚新建的文件夹(双击文件夹则打开文件夹).如下图所示: 在刚刚我们打开的文件夹资源地 ...
 - 适合新手入门Spring Security With JWT的Demo
			
Demo 地址:https://github.com/Snailclimb/spring-security-jwt-guide .欢迎 star! Spring Security 是Spring 全家 ...
 - 移动4G插卡注网
			
本文根据插入移动4G单卡到注册4G网络过程的mtklog分析. 插卡动作: 从以上信息无法区分单卡还是双卡,通过ATR参数判断: 注网流程,此过程未开启4G数据连接: [MS->NW] ESM_ ...
 - SAP CRM Product Interlinkage - Customer Product ID的一个例子
			
For detail technical introduction about relationship, please refer to this wiki. The relationship tr ...
 - 由MQTT topic的正则表达式匹配引发的特殊字符"/"匹配思考
			
正则表达式中的'/'替换 近期项目对接OneNET的MQTT物联网套件,需要完成命令下发流程. 流程要求: (1)设备在接收平台下发的命令(topic为$sys/{pid}/{device-name} ...
 - ThinkPHP3.2.3:使用模块映射隐藏后台真实访问地址(如:替换url里的admin字眼)
			
例如:项目应用目录/Application下模块如下,默认后台模块为Admin 现在需要修改后台模块的访问地址,以防被别有用心的人很容易就猜到,然后各种乱搞... (在公共配置文件/Applicati ...