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
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
原文地址:https://www.cnblogs.com/goloving/p/11440880.html
- 网站集成打字震动特效JS代码改进版
- Linux基础知识之文件隐藏属性
- Linux系统chmod误操作目录权限恢复方法
- 结合VBS,实现批处理自动以管理员身份执行
- ASM 翻译系列第三十六弹:ACFS磁盘组的重平衡操作
- Linux基础知识之xargs命令
- HDU-------(2795)Billboard(线段树区间更新)
- ASM 翻译系列第三十七弹:ASM密码文件目录
- 发现插件生成的robots.txt不能被谷歌和360识别
- Github 年度开源报告:TensorFlow 成最受欢迎深度学习项目
- [持续更新]批处理重命名系列案例
- java学习之协调同步的线程
- 如何确保NFS服务安全
- ASM 翻译系列第三十八弹:ASM数据清理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SpringBoot常用注解的简单理解
- Qt多线程编程之线程的同步和互斥
- TS 设计模式06 - 代理模式
- TS 设计模式07 - 观察者模式
- Java 语言基础(异常机制和File类,IO流,多线程,网络编程,反射机制)
- 前京东陌陌高级架构师的直播笔记分享(Java 内存问题排查和解决:内存概览,内存问题出现的原因,问题代码,案例分析)
- leet笔记-62.不同路径
- leet笔记-63.不同路径II
- 五分钟C语言实现数据结构 之 二叉树链式存储
- 视频上云/网络穿透/网络映射服务EasyNTS前端切换页面卡顿如何优化?
- [译] 在 Vue 组件中分离 UI 和业务逻辑
- Android Notes|BottomNavigationView 爱上 Lottie
- Android Notes|玩转 ShapeableImageView
- 前端技术 Webpack(学习 Webpack 的原因,Webpack 快速入门)
- 每日一问第1期 | 截取字符串