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

  nuxtjs里面集成vuex的建立方式改变了,而且官方不建议以导出Vuex实例的方式建立store,而且会在nuxt3里面删除。这样就会存在一个问题,我怎么像普通vue spa项目同样直接 import store from '@/store'呢?vue

  虽然官方建议为这个js写一个plugins,而后在 plugins 里面使用ios

export default ({ app, $axios, store, route, redirect }) => { ... }

  虽然这里面确实能够获取到,大多数状况也确实该如此。可是总有那么些异常状况须要在单独js里面引用怎么办呢?而我也确实遇到了,由于项目以前以spa形式,后来要作平台化,须要依赖seo,那么只能转为ssr渲染。项目也不小,包含的内容很是多,总体转为ssr,又没有足够的时间周期,那么确定是越平滑过渡越好,尽可能避免大量的改动。那么就确实遇到了这个问题,须要在单独js文件里引入store及router。vuex

  由于nuxt建立的 store 实例并无 exports 出来,因此无法直接 import。以前尝试了不少方法,好比:axios

一、由于nuxt里的vuex建立方式是将state以函数导出,getters等也是直接导出,那么尝试app

import { state } from '@/store/index.js'

// 用的时候就须要
state().pick

  可是这种方式获取到的值始终是null,这显然是不对的。可能缘由在于它导出的只是这个变量,而并非这个store实例里的这个state,因此致使获取不到值,不知道理解是否正确。那么继续找方案。函数

二、网上查的:spa

  能够 hack 一下,从组件中获取到 store 后赋值到一个地方保存起来ssr

  也能够写一个 plugin,在 plugin 执行的时候把 store 保存起来nuxt

  没具体试过可不可行code

三、实例初始化完毕之后 nuxt 会在 window 全局注入$nuxt ,经过$nuxt.$store 能够访问 store,$nuxt.$router 能够访问到router,可是须要注意的是,初始化完毕之前是没法访问$nuxt的,因此须要再初始化完毕以后才能使用该方法。

  const store = $nuxt.$store const router = $nuxt.$router
相关文章
相关标签/搜索