Tech▶VueJS

Vue3でGlobalなFiltersの実現

  • このエントリーをはてなブックマークに追加

Vue3+CompositionAPIを使っていますが、MixinやFilterが無くなったのでその代替をどうするか。

Filterの代わり

globalPropertiesを使います。
globalPropertiesに登録したものは、Templateからそのまま参照できます。

main.js
const app = createApp(App)
app.config.globalProperties.$filters = {
  formatNumber(number) {
    return Number(number).toLocaleString("en-US", {
      maximumFractionDigits: 20
    })
  }
};
app.mount("#app")
template
{{ $filters.formatNumber(num) }}

setup()からの参照

setup()内では$filtersでは参照できません。参照したい場合は、次のようにgetCurrentInstance()を利用します。

import { defineComponent, getCurrentInstance } from "vue"
export default defineComponent({
  setup() {
    const app = getCurrentInstance()
    const $filters = app.appContext.config.globalProperties.$filters
  }
})

sample-code: https://codesandbox.io/s/upbeat-mcnulty-mxi7i?file=/src/App.vue

provide/ inject

もしくは、設計思想的にはprovide, injectを利用するのがよさそうです。

main.js
app.provide("$filters", app.config.globalProperties.$filters)
setup() {
  const $filters = inject("$filters")
}

キーは文字列じゃなくて、exportしたSymbolにするのが良さそう。

参考情報