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的更多相关文章

  1. ASP.NET MVC 中单独的JS文件中获取Controller中设定的值

    1,在Controller中的Action 中将指定值写上.       //       // GET: /Home/       public ActionResult Index()       ...

  2. window.location.href 放置在单独的JS文件中使用时问题

    场景:假设当前浏览器地址栏的地址是:http://localhost:8888/SSHBoot/tourist/homeMainAction_signInUI.do, 现在我想在点击按钮时定位到“ht ...

  3. 由js文件中引入另外的js文件想到的

    1. html中,使用<script src="../static/js/xxx.js"></script>引入js文件.   2. 在js文件中,引入js ...

  4. 使用Babel将单独的js文件 中的 ES6转码为ES5

      如果你并没有接触过ES6,当你看到下面的代码时,肯定是有点懵逼的(这是什么鬼?心中一万头神兽奔腾而过),但是你没看错,这就是ES6.不管你看不看它,它都在这里. 1 2 3 4 5 6 7 8 9 ...

  5. 如何在一个js文件中引入另外的js文件

    例如想要在a.js中引用b.js.c.js和d.js document.write("<script language='javascript' src='b.js'></ ...

  6. js文件中函数前加分号和感叹号是什么意思?

    本文转自:http://blog.csdn.net/h_o_w_e/article/details/51388500 !function(){}();   !有什么用? 从语法上来开,JavaScri ...

  7. 如何在js文件中实现获取request.getCotextPath();

    我们在jsp中可以方便的使用“request.getCotext()”来获取工程的根目录. 但是如果我们的js代码存在一个单独的js文件中,这时候再想获取根目录,我们就要自己截取了.可以采用下面的方式 ...

  8. JS文件中的中文在网页引用时显示乱码的简单解决方式

    今天把一个jquery方法从前台cshtml文件转移到单独的js文件中后执行不成功,调试发现if判断中的中文字符串变成了乱码,之前在前台文件中是可以正常显示的,所以判定可能是跟文件的编码方式有关系. ...

  9. js文件中使用el表达式问题

    作者:Sang 单独js文件不能用el表达式. 首先,JSP是由服务端执行的,EL表达式自然也由服务端解析执行,因此如果EL所在的脚本在JSP页面内,它是可以获取到值的,这个值在服务器端返回到浏览器端 ...

随机推荐

  1. vue+element 给表格添加数据,页面不实时刷新的问题

    由于页面加载时,使用了keep-alive,keep-alive具有数据缓存作用,当在添加页面添加成功时,返回主页面没有立即更新.数据有缓存. 解决办法如下: 将获取数据列表的方法放到activate ...

  2. ReentrantReadWriteLock 源码分析

    ReentrantReadWriteLock  源码分析: 1:数据结构: 成员变量: private final ReentrantReadWriteLock.ReadLock readerLock ...

  3. eclipse jvm 参数配置

    双击tomcat服务器---->打开启动配置--->VM 自变量

  4. 一个简单 System.Threading.Tasks.Dataflow.BufferBlock 示例

    直接贴代码了: using System; using System.Threading.Tasks; using System.Threading.Tasks.Dataflow; namespace ...

  5. 浅谈mongodb内存

    本文仅限于mongodb3.0.0(wiredtiger引擎) 一.mongodb内存使用 1.热数据 这一点是SQL和nosql之间的巨大差距,将热数据存在内存相当于自带cache,若wiredti ...

  6. Mysql系列(十一)—— 性能分析慢查询日志

    转载自:http://www.cnblogs.com/kerrycode/p/5593204.html 慢查询日志概念 MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响 ...

  7. WPF 高级篇 MVVM (MVVMlight) 依赖注入使用Messagebox

    原文:WPF 高级篇 MVVM (MVVMlight) 依赖注入使用Messagebox MVVMlight 实现依赖注入 把弹框功能 和接口功能注入到各个插件中 使用依赖注入 先把所有的ViewMo ...

  8. python 练习题:小明的成绩从去年的72分提升到了今年的85分,请计算小明成绩提升的百分点

    # -*- coding: utf-8 -*- # 小明的成绩从去年的72分提升到了今年的85分,请计算小明成绩提升的百分点,并用字符串格式化显示出'xx.x%',只保留小数点后1位. s1 = 72 ...

  9. 一款神器,批量手机号码归属地查询软件,支持导出Excel表格

    很多人查询手机号码归属地,还在一个一个百度去查太慢了,如果有几万个那么是不是要百度很久 有一款软件很多人都不知道,可以吧号码复制进去,即使里面有汉字也可以把手机号码挑出来,然后查询归属地,还具有号码去 ...

  10. template might not exist or might not be accessible by any of the configured Template Resolvers 完美解决

    初学者在maven spring boot web项目中使用thymeleaf 模板,经常会遇到  “template might not exist or might not be accessib ...