🤖

Vue3でsetupからthisにアクセスする最終手段

2023/01/10に公開

JSON

tech

可能であればやらない方がいいが

Vue3時代にviteでvue2をビルドする

遅ればせながらvueのバージョン3を使い始め、
悪戦苦闘する日々。

Vue2からVue3に移設する際に、
Composition APIに移植する必要があるのだが、
どうしても難しくて現状の形のまま使いたい場面があった。

Composition APIからOption APIにアクセスできればいいのだが、
その手段は標準では用意されていない。
万策尽きたかと思ったが探してみたらあった。
それが

getCurrentInstance

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

setupからthis.methodにアクセス

サンプルコンポーネント

以下のコンポーネントがあったとする
(実際はもっと複雑)

component

export default = {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    getList() {
      console.log("getList")
      const list = [1,2,3,4]
      this.list.push(...list)
    },
  },
}

setupからthisにアクセスする

getCurrentInstance はコンポーネントのインスタンスそのものが取れる。
そこから proxy と ctx というプロパティからデータが取れる。
ただ、ctx は開発環境用らしいので proxy を使う。

component

import {getCurrentInstance} from 'vue'
export default = {
  setup(prop, context) {
    const currentComponent = getCurrentInstance()
    
    // this.getListへアクセス
    currentComponent.proxy.getList()
    
    // this.listへアクセス
    console.log(currentComponent.proxy.list) // => [1,2,3,4]
  
    return {};
  }
  data() {/* 省略 */},
  methods: {/* 省略 */},
}

参考:

------------------- ↓ 後書きはここから ↓-------------------

あくまで最後の手段ということで。