【Vue】Vueインスタンスに初期値を渡す

個々のコンポーネントにバックエンドから初期値を追加する方法は以前記載しました。

blog.websandbag.com

個々のコンポーネントの場合は、props に直接値を設定すれば解決できます。
しかし、コンポーネントの種類に関わらず共通で使いたい値の場合があります。
この方法では解決できません。

Vueインスタンスに初期値を渡して、子コンポーネントは全ての親に当たるコンポーネントから値を渡せば解決できそうですね。

さて、
今回はVueインスタンスに初期値を渡す方法について記載します。

最初に思いついた事

Vueを使う時、最初にインスタンスを定義します。
インスタンスで指定するel オプションのタグにpropsを設定する方法はどうでしょうか？

<div id="app" v-bind:example="<初期値>">
     <!-- Vueインスタンスのelementタグでpropsを定義したい -->
</div>

<script>
    import Vue from 'vue';

    let app = new Vue({
   el: '#app',
        props: {
             example
        }
</script>

結論を言うと、この方法は解決出来ません。
そもそもprops はコンポーネント間のやりとりを行うためオプションですので、インスタンスからは扱う事が出来ませんでした。

解決策

環境ファイルを作る

特定の文字列や、数字であれば環境ファイルにまとめる方法があります。

jsで環境ファイルを扱う場合は、dotenvと言うプラグインがあります。

www.npmjs.com

導入方法

今回はwebpack でビルドしますので、dotenv-webpack を使用します。

www.npmjs.com

npmでプラグインをインストールします。

$ npm i -D dotenv-webpack

次に、npm のpackage.json と同じ階層に.envファイルを設置します。
envファイルの記述方法は、下記のようにキー名と値を= で紐付けます。

APP_ENV=staging

次にwebpack.config.jsでdotenvのプラグインを読み込む設定を記述します。

webpack.config.js

const Dotenv = require('dotenv-webpack');

module.exports = {
     plugins: [
          new Dotenv()
     ]
}

呼び出し方

プラグインを設定すると、インスタンスやコンポーネントからでも環境設定値を参照できるようになります。
呼び出す場合はprocess.env.<キー名>で呼び出します。

console.log(process.env.APP_ENV)

初期値用のコンポーネントを作る

文字列や数字であれば前述の方法で事足りますが、配列は扱えません。
初期値を管理するためのコンポーネントを用意して、インスタンスはコンポーネントから初期値を取得すると言う方法があります。

実装方法

例えば、InitDataと言う初期値管理用のコンポーネントがあるとします。
このコンポーネントではoptions と言う名前で配列を扱えるようにしたいです。

InitData.vue

<template></template>
<script>
    export default {
        props: {
            options: Array
        }
    }
</script>

InitDataコンポーネントのタグに配列でデータを渡します。

index.html

<div id="app">
     <init-data  ref="initData" :options='[{
          name: "太郎"
          age: 20
     },{
          name: "二郎"
          age: 18
     }]'></init>
</div>

Vueインスタンスが側は、受け取り用のdata を用意します。
ライフサイクルフックのmounted 以降に、用意したdataへ代入します。

app.js

let app = new Vue({
    el: '#app',
    data: {
        parentOptions: []
         },
         mounted() {
        let init = this.$refs.initData;
        this.parentOptions = init.$props.options;
    }
});

呼び出し方（受け渡し方）

子コンポーネントで、受け取り用のpropsを設定します。

ChildComponent.vue

<template></template>
<script>
    export default {
        props: {
            options: Array
        }
    }
</script>

受け渡す際に、v-bindでインスタンスのdata を指定してあげれば受け渡す状態が出来ます。

index.html

<div id="app">
     <init-data  ref="initData" :options='[{
          name: "太郎"
          age: 20
     },{
          name: "二郎"
          age: 18
     }]'></init-data>
    <child-component  v-bind:options="parentOptions">
    </child-component>
</div>

以上です。

後者については、一応この方法であればデータを受け渡すことも可能です。
しかし、初期値を渡すためだけにコンポーネントを用意するのは一般的な方法ではないかもしれません。

参考程度にご覧いただければ幸いです。

websandbag ブログ