nuxt 如何引入js_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

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中,使用引入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("

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页面内,它是可以获取到值的,这个值在服务器端返回到浏览器端 ...

随机推荐

Mysql - 性能优化之子查询

记得在做项目的时候, 听到过一句话, 尽量不要使用子查询, 那么这一篇就来看一下, 这句话是否是正确的. 那在这之前, 需要介绍一些概念性东西和mysql对语句的大致处理. 当Mysql Server ...

Gnome_Terminal

快捷键 ctrl shift m 我自定义的快捷键,可以给终端命名 ctrl shift t 新建标签页,并且目录为当前目录 ctrl shift pageup 标签页往前移 ctrl shift p ...

[原]一个简单的Linux TCP Client所涉及到的头文件

今天在Linux环境下写了一个最简单的TCP Client程序,没想到Linux环境下的头文件竟然这么分散,让我这样的菜鸟很是郁闷啊.编译成功的代码如下: #include

BITED数学建模七日谈之五：怎样问数学模型问题

下面进入数学建模经验谈第五天:怎样问数学模型问题 写这一篇的目的主要在于帮助大家能更快地发现问题和解决问题,让自己的模型思路有一个比较好的形成过程. 在我们学习数学模型.准备比赛的时候,经常会遇到各种 ...

android 读取串口数据的服务

2016-09-1813:10:03 继承Service,定义抽象方法onDataReceived,子类通过实现抽象方法获取接收到数据的回调. package com.zrsoft.liftad.se ...

Android 读取手机短信

获取android手机短信需要在AndroidManifest.xml加权限: