Clever Geek Handbook

VueJS 3：コンポジションAPIを使用したグローバルステート





新しいCompositionAPIを使用すると、Vuexストアを削除できます。これを実現する方法の簡単な例を見てみましょう。そして、長所と短所を考慮してください。



例



Vuexのサンプルカウンターを-simplest -storeドキュメントから取得し、compositionAPIを使用して実装してみましょう。



カウンターモジュールモジュール/counter.ts： 



import { ref } from 'vue'

const counter = ref(0)

export default function useCounter () {
  const increment = () => {
    counter.value++
  }
  return { counter, increment }
}


カウンター変数はuseCounter（）関数の外にあることに注意してください。したがって、useCounter関数が異なるコンポーネントで呼び出されると、counterは同じインスタンスを参照します。そして、これが私たちに必要なものです。



さまざまなコンポーネントでカウンターを使用するのは簡単です。 



<template>
    <div>
      {{ counter }}
    </div>
   <button @click="increment">+</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import useCounter from '@/modules/useCounter'

export default defineComponent({
  name: 'App',
  setup () {
    const { counter, increment } = useCounter()
    return { counter, increment }
  }
})
</script>


グローバルカウンターを使用するには、useCounterを必要なモジュールにインポートして使用する必要があります。



カウンタ変数へのアクセスを制限する必要がある場合は、それではなく、getter関数をエクスポートできます。 



import { ref, computed } from 'vue'

const counter = ref(0)
const getCounter = computed(() => counter.value)
const increment = () => counter.value++

export default function useCounter () {
  return { getCounter, increment }
}


長所と短所



Vuexの優れた点の1つは、Vue.jsdevtoolsを使用することです。グローバル状態全体をツリーの形で表示したり、渡された変数を使用してミューテーションの呼び出しを表示したり、さまざまな状態にロールバックしたりできると非常に便利です。構成APIがVue.jsdevtoolsでどのようにサポートされるかはまだ明確ではなく、作業はまだ進行中です。



Vuexの構造（ゲッター、ミューテーション、アクション）は構文的に冗長に見えるかもしれませんが、ストレージモジュールの作業を明確に表示および分離することができ、マイナスではなくプラスになります。そして、composition APIを使用する場合、開発者はすべてを自分で決定します。キャンディーを作成できるかどうかはわかりません。



TypeScriptのサポートはVuexの弱点です。Vuexを入力しようとするすべての記事は怖いように見えます。そして、それが冗長なVuexが非常に冗長になる方法です。コンポジションAPIを使用している場合は、より簡単です。通常どおりTypeScriptを使用します。



Vuexはプラグインとして接続し、これを介してすべてのコンポーネントで利用できます。$ストア。コンポジションAPIの場合、モジュールをインポートする必要があります。大きな違いはなく、どちらのアプローチでもグローバルな状態で作業できます。



一方、コンポジションAPIを使用すると、不要な依存関係がなくなり、便利なようにグローバル状態を整理できます。一方で、テストの問題は残っています。グローバルモジュール自体はテストが簡単ですが、それらを使用するモジュールはすでにテストがより困難です。



結論



Vuexを放棄する価値があるかどうかはまだ明らかではありませんが、Vuexによって解決された問題を解決できる新しいツールは間違いなくあります。近い将来、どちらのアプローチが優れているか、そしてその場合は明らかになるでしょう。その間、Vuex開発者はプロジェクトの折りたたみについて発表しておらず、以前のようにそれを見ました。Vue3のドキュメントには、Vuexへのリンクがまだあります。


More articles:


All Articles