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