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. Redis Persistent Replication Sentinel Cluster的一些理解

    Redis Persistent Replication Sentinel Cluster的一些理解 我喜欢把工作中接触到的各种数据库叫做存储系统,笼统地说:Redis.Mysql.Kafka.Ela ...

  2. centos6.5 安装openresty

    [1]centos6.5 安装openresty步骤 (1)基础依赖库安装 1.1 yum install pcre-devel openssl-devel gcc curl (2)openResty ...

  3. C++分治策略实现二分搜索

    问题描述: 给定已排好序的n个元素组成的数组,现要利用二分搜索算法判断特定元素x是否在该有序数组中. 细节须知: (1)由于可能需要对分治策略实现二分搜索的算法效率进行评估,故使用大量的随机数对算法进 ...

  4. MySQL 中获取用户表、用户视图、用户表中列信息

    直接贴代码了: /// <summary> /// MySql 数据库维护中心 /// </summary> public class MySqlDbMaintenance:D ...

  5. [跨域问题]ssm+vue前后台分离跨域问题解决方法

    跨域未解决时: Access to XMLHttpRequest at 'http://localhost:8080/vue/findall from origin 'http://localhost ...

  6. R数据挖掘 第一篇:聚类分析(划分)

    聚类是把一个数据集划分成多个子集的过程,每一个子集称作一个簇(Cluster),聚类使得簇内的对象具有很高的相似性,但与其他簇中的对象很不相似,由聚类分析产生的簇的集合称作一个聚类.在相同的数据集上, ...

  7. 有关 Table 获取Json 的解决方案

    目录 写在前面 具体操作步骤 写在前面 在项目的开发过程中,我们使用最多的是表单的序列化.而有关以Table的序列化成Json的方法不太常见. 在做功能的时候发现,没有提交如何把Table序列化成Js ...

  8. Gin-Go学习笔记八:Gin-Web框架 常用的包

    常用的包 1>     在java,.net,php,node.js等语言常常会使用到包的概念.包的使用,可以加快项目的进度的开发,以及更好的实现项目的效果.我在网上查到了包的作用如下: 1.包 ...

  9. Java 之 枚举(Enum)

    一.枚举 1.概述 枚举:JDK1.5引入的,类似于穷举,一一罗列出来 Java 枚举:把某个类型的对象,全部列出来 2.应用 什么情况下会用到枚举类型? 当某个类型的对象是固定的,有限的几个,那么就 ...

  10. docker上启动mysql镜像,mysq中记录乱码解决方法

    在docker上启动一个mysql, 1. docker pull mysql 2. docker run --name mysql_dev -p 3306:3306 -e MYSQL_ROOT_PA ...