Mounted 内で宣言した変数を methods から参照する方法


#1

Vue と JavaScript を始めたばかりの者です。初歩的な内容であれば申し訳ありません。

Vue のコンポーネントの mounted() 内で宣言した変数を methods や destroyed() から参照したいのですが、方法はありますでしょうか。Vue というより JS のスコープの問題なのかもしれませんが、Vue の単一ファイルコンポーネントでのスコープの扱いがよくわからないのです。ご教示いただければ幸いです。

<script>
export default {
  data: {
    return {
      a: 'hoge'
    }
  },
  mounted() {
    // mounted 内での変数宣言
    const b = 'hoge'

    console.log(b) -> 'hoge'
  },
  destroyed() {
    // 参照可能
    console.log(a) -> 'hoge'

    // b を参照したい
    console.log(b) -> undefined

    // これも undefined
    console.log(this.b) -> undefined
  },
  methods: {
    mothod() {
      // 参照可能
      console.log(a) -> 'hoge'

      // b を参照したい
      console.log(b) -> undefined

      // これも undefined
      console.log(this.b) -> undefined
    }
  },
}
</script>

#2

method 1 (usually)
mounted() {
// mounted 内での変数宣言
// const b = ‘hoge’
this.b = 'hoge’

console.log(b) -> 'hoge'

},

OR method 2


#3

mkobayashime さんがどんな学習状況か分からないけど、質問内容からすると言語としての javascript を先に修めた方がいいと思います。

理解が曖昧なままで進めると、時間も掛かるし中途半端な成果になってしまうと思うなぁ。

vue や react は javascript を目的に合わせて使いやすくしただけのものだから、数年後には別の framework が台頭しているかもしれない状況下でも、所詮 javascript で作られているのなら、習得も幾分かスムーズになるかもしれないので。


#4

ご回答いただいた method 1 で無事に解決しました。素早いご対応に心より感謝致します。


#5

ご指摘の通りだと感じております。言語としての基礎を疎かにしては、Vueというフレームワークに依存した局所的な知識しか得られませんものね。JSの学習を優先して進めることと致します。ご指摘ありがとうございました。