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. 2.1:CGPROGRAM

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 前言 经过前面两个章节的铺垫,我们对渲染以及Unity Shaderlab ...

  2. fancybit个人简介

    程序员一枚 熟悉C C++ C# js lua等多种常见开发语言 熟悉Unity游戏开发 node.js pomelo和C# scut 网游后端框架 做过.net和php网站后端 二次元文化爱好者 有 ...

  3. AspNetCore.Identity详解2——注册用户

    上一篇:AspNetCore.Identity详解1——入门使用 打开数据库,可以看到使用EF自动生成的表结构如下: 重点关注AspNetUsers表,打开数据库里的表可以知道目前也只用到了这张表.然 ...

  4. C# VB .NET生成条形码,支持多种格式类型

    条形码简单,方便印刷,因此在各个领域得到了广泛的应用.我们自己的项目里也可以将一些特定的数据以条形码的方式来展示和应用,实现一码走天下.那么如何在C#,.Net平台代码里生成条形码呢?答案是使用Sha ...

  5. python 排序 归并排序

    算法思想 迭代法: 归并算法一共有两种思想,笼统的说,这两种思想的区别就在于一种不分割未排序的序列(直接将序列看为n个个数为1的子序列),这种称为---迭代法 直接从队头开始,两两合并为一个个数为2的 ...

  6. Spark源码执行逻辑分析【基于案例SparkPi】

    一.案例SparkPi代码 package scala import org.apache.spark.sql.SparkSession import scala.math.random /** Co ...

  7. vue开发环境配置

    一.开发工具 Visual Studio Code 二.环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nod ...

  8. InvalidOperationException: Operations that change non-concurrent collections must have exclusive access. A concurrent update was performed on this collection and corrupted its state. The collection's

    InvalidOperationException: Operations that change non-concurrent collections must have exclusive acc ...

  9. 开放API接口安全处理!

    目录 概念 加密 MD5 Token 开放api参数 重复提交,恶意调用 日志 验证码 开放API接口安全处理! 参考文献: 公钥,私钥和数字签名这样最好理解 (转载) 概念 存在问题: 数据窃取 数 ...

  10. LCD硬件原理

    想象一下,屏幕的后面有一个电子枪,电子枪位于某个像素的背后,然后向这个像素发射红绿蓝三原色,从而就可以组成任意一种颜色.简单的说,电子枪在像素的背后一边移动,一边向像素发射红绿蓝. 如果要编写出LCD ...