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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值