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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM