Nuxt.js2系のcomposition APIを使用してSPAモードの開発をしています。
.envファイルに定義した環境変数を、nuxt.config.jsのpublicRuntimeConfigに
定義して以下のようにVuex内のファイルで呼び出そうと考えました。
import { useContext } from '@nuxtjs/composition-api'
const { $config } = useContext()
export const actions = {
console.log($config)
}すると以下のようなエラーが出ます。
This must be called within a setup function. なんともSPAモードのVuexでは仕組み上、storeの中でpublicRuntimeConfigにアクセスすることができないようです。
SSRモードであればnuxtServerInitアクションの中で定義してやれば使えるとちょこちょこ記事で書かれていますが、今回はSPAモードなので別の方法を考えました。
解決策
アプリ内の他の場所から呼び出されたアクションをdispatchすることで、コンテキストを渡すことにしました。
setup () {
const { $config } = useContext()
const store = useStore ();
store.dispatch ( "ActionExample", { data: "hogehoge", config: $config } );
}export const actions = {
ActionExample(context, payload) {
console.log(payload.config)
context.commit('setData', payload.config)
}
}関連記事
