今回は、Nuxt.jsのcomputedやmethodsの中で「isDev」を取得する方法を考えます。
「isDev」は「開発モードかどうか」を表す真偽値です。 「npm run dev」ならtrue、そうでなければfalseが返ります。
僕はけっこう開発中専用の処理を入れたりするので、けっこう使います。
「computedやmethodsの中でisDevを取得」は言い換えると「thisからisDevへはどうアクセスするか」になると思います。 分からないと不便なので調べていきます。
WordPressの上でな！
※ このブログはまだWordPress製です
「isDev」はcontextオブジェクトの中に入っている
Nuxt.js公式の説明によると、「isDev」はcontextオブジェクトの中に入っていますよと。
なのでasyncDataの中でならこの↓ように引数で受け取ることができます。
export default {
async asyncData ({ isDev }) {
},
}
fetchは…非推奨だそうです。
export default {
async fetch ({ isDev }) {
},
}
代わりにmiddlewareが使えますとのこと(分からん)。
export default {
middleware ({ isDev }) {
},
}
computedやmethodsの中で「isDev」を取得する方法
「isDev」がcontextオブジェクトの中に入っていることが分かったので、後は「this」のどこにcontextオブジェクトが入っているか調べるだけです。
「this」をconsole.logして中身を見ていくと、「this.$root.context」に見つかりました。
なので「isDev」は「this.$root.context.isDev」になります。
何度も使うようならcomputedに追加してもいいかもしれません。
export default {
computed: {
isDev() {
return this.$root.context.isDev
},
},
}
以上、WordPressからお届けしました！