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.$storeconst router = $nuxt.$router

nuxt 如何引入js_nuxtjs如何在单独的js文件中引入store和router相关推荐

在javascript中使用el表达式(jsp中的javascript中支持写el表达式，毋庸置疑，单独的js文件中不支持写el表达式，别钻牛角尖)
哎,够背的,最后4张图怎么调整都很小,看不清楚,所以大家还是看我这篇文章吧在javascript中使用el表达式(图片清晰版,有图有真相),这篇文章的图片可以正常看清楚,跟我这篇文章是一样的内容! 有 ...
在一个js文件中引入另一个js文件
第一个js文件(被引入的js文件),文件名one.js,内容如下 function alertInOne(){ alert('in one'); } 第二个js文件,文件名two.js,内容如 ...
js文件中引入js的方法
方法一,在调用文件的顶部加入下例代码 document.createElement("script").setAttribute("src", "re ...
JavaScript:在一个JS文件中引入另外的一个JS文件
前因这个问题是因为有很多的Html文件(含有公共的JS文件),可能都需要使用同一个JS方法,但是这个JS方法需要依赖其他JS文件的支持,这时候我们不能每一个Html都要写导入JS的标签,我们需要使用 ...
如何在vue文件中引入heyui组件库
1.npm 下载 npm install heyui 2. 此处我选择以js的形式引入main.js // css引用 import (less) "~heyui/themes/index. ...
在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字
一.需求分析在我们写前端页面的时候,大部分时候是不需要用到第三方字体的,但如果是面向C端的页面,比如宣传页,就有可能会引入第三方字体,主要还是看UI设计师咋想了,此时我们可以通过让UI将特殊字体切成 ...
单独使用elementui_Vue在单独引入js文件中使用ElementUI的组件
Vue在单独引入js文件中使用ElementUI的组件问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...
Nuxt 项目引入外部Js的正确姿势，问题描述：打包构建之后引入的外部 js失效，构建之后的 .nuxt 文件夹下的js文件中，引入 js 的script标签凭空消失！
首先先说我遇到的问题描述: 我是用vue + nuxt项目,项目中使用了阿里播放器,于是我在vue页面中直接引入了阿里播放器的 css和js文件,然后运行没有任何问题:如下图所示: 但是! ...
实现java的outline功能_在单独的功能文件中重用Scenario Outline中的示例
我将如何在单独的.feature文件中使用表格在多个.feature文件中使用多个场景大纲?我正在努力只在一个地方更新我的测试数据,并带来所有的好处 . 我目前有一个 Scenario Outline ...

nuxt 如何引入js_nuxtjs如何在单独的js文件中引入store和router

nuxt 如何引入js_nuxtjs如何在单独的js文件中引入store和router相关推荐

最新文章

热门文章