Vue.jsでjsをimportをした際に読み取るまでundefinedになってしまう

jsの設定ファイルなどをimportをした際に、読み取るまでundefinedになってしまうので、そうならないようするための良い方法はありますか？

例) test.vueからsettings.jsをimportして表示する。

settings.js

js
1export default {
2  baseUrl: 'https://test.com',
3}

test.vue

js
1<template>
2  <div>{{ settings.baseUrl }}</div>
3</template>
4
5<script>
6  import settings from '@/config/settings'
7  
8  export default {
9    mounted(){
10    },
11  } 
12</script>

↑だと、settings.baseUrlは定義されていませんとエラーが発生してしまいます。

これを回避するために、下記のようにしています。
test.vue

js
1<template>
2  <div>{{ load_settings.baseUrl }}</div>
3</template>
4
5<script>
6  import settings from '@/config/settings'
7  
8  export default {
9    computed:{
10      load_settings:()=> settings || '', 
11    },
12  } 
13</script>

これでエラーは回避できますが、load_settingsをcomputedで定義しなければなりません。そのままsettingsを使用できるようにしたいのですが良い方法はありますか？

行動規範の内容に同意します

回答2件

ベストアンサー

読み取るまでundefinedになってしまうわけではなく、import したものをそのままVueのテンプレートに表示させることはできません！
Vueの管理下にデータを置いてあげる必要があるので、computedに入れるのはとてもいい選択だと思います。
自分なら↓みたいにすると思います！

<script>
  import settings from '@/config/settings'

  export default {
    computed:{
      // load_settings:()=> settings || '', 
      settings: () => settings
      // もしかしたら↓の書き方でもいけるかも(未検証)
      // settings: settings
    }
  } 
</script>

↑の状態ならテンプレートからsettingsとして扱えます。

投稿2020/03/26 11:09

ymneet

総合スコア154

すでに解決済みだったらすみません
この場合おそらくですが以下のように書くのが適切ではないかと思います

javascript
1<template>
2  <div>{{ baseUrl }}</div>
3</template>
4
5<script>
6import settings from '@/config/settings'
7
8export default {
9  data() {
10    return {
11      baseUrl: ''
12    };
13  },
14  created() {
15    this.$data.baseUrl = settings.baseUrl
16  }
17};
18</script>