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

标签：nuxtjs,js,state,实例,router,store,nuxt
来源： https://www.cnblogs.com/mmykdbc/p/12331018.html