2020年2月2日にVuex4.0.0がリリースされました🎉
さらに、Vuex4がリリースされたことでVuexが正式にVue Composition APIに対応しました🎉
Vuex3からメジャーバージョンが変わりVuex4がリリースされましたが、ほとんど全てのAPIはVuex3から変更されていません。
と言うのも、Vuex4は互換性に焦点を当てており、Vuex4はVue3をサポートしつつVuex3と同じAPIを提供するため、既存のVuexのコードを再利用することができます。
しかし、いくつか破壊的変更もあります。
この記事ではまずは新機能を解説した後に、破壊的変更を解説します。
※以下の公式ドキュメントをもとにしています。
新機能
useStore合成関数
Vuex4がリリースされたことで、ようやくVuexがVue Composition APIに対応しました。
Vue Composition APIでStoreをリアクティブに扱うためにはuseStore合成関数を使用してstoreを取得します。
import { useStore } from 'vuex'
export default {
setup () {
const store = useStore()
}
}StateとGettersへのアクセス
StateとGettersをtemplateにエクスポートしてリアクティブに扱うためにはcomputed関数を使用します。
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
setup () {
const store = useStore()
return {
// computed関数の中でstateにアクセスする
count: computed(() => store.state.count),
// computed関数の中でgetterにアクセスする
double: computed(() => store.getters.double)
}
}
}MutationsとActionsへのアクセス
MutationsやActionsをtemplateにエクスポートして使用するためにはcommitとdispatchを使用します。
import { useStore } from 'vuex'
export default {
setup () {
const store = useStore()
return {
// mutationにアクセスする
increment: () => store.commit('increment'),
// actionにアクセスする
asyncIncrement: () => store.dispatch('asyncIncrement')
}
}
}Vuex4の破壊的変更点
インストールプロセス
公式ドキュメントではインストールプロセスと書かれていますが、これはVuexのパッケージをインストールするプロセスではなく、VuexをVueインスタンスにインストールするプロセスのことを指しています。
Vuex4ではStoreインスタンスを作成する際にcreateStore関数を使用します。
import { createStore } from 'vuex'
export const store = createStore({
state () {
return {
count: 1
}
}
})この作成したstoreをVueインスタンスに渡します。
import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'
const app = createApp(App)
app.use(store)
app.mount('#app')Vuex4では互換性も維持されているので、従来通りnew Store(…)構文も使用できますが、これからはVue3およびVue Router Nextに合わせるためにcreateStore関数を使用することが推奨されています。
Whilst this is not technically a breaking change, you may still use the new Store(…) syntax, we recommend this approach to align with Vue 3 and Vue Router Next.
TypeScriptサポート
Vuex4ではissue #944を解決するためにVueコンポーネント内のthis.$storeのグローバル型を削除しました。
TypeScrpitを使用する際には以下のように型を宣言する必要があります。
import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'
declare module '@vue/runtime-core' {
// Storeのstateを宣言
interface State {
count: number
}
interface ComponentCustomProperties {
$store: Store<State>
}
}createLogger関数がコアモジュールに移動
Vuex3ではcreateLogger関数はvuex/dist/loggerからエクスポートされていましたが、Vuex4ではコアパッケージに含まれています。
import { createLogger } from 'vuex'まとめ
今回はVuex4の変更点を見てきました。
Vuex4では大きな変更はなく、Vue Composition APIに対応するためという意味合いが強いように感じます。
ただVuexをVue Composition APIに対応させるのはVuex3では非常に煩雑だったので正式に対応してくれたのは非常に嬉しいですね。
もしまだVue Compositoin APIの使い方を勉強されたことがない方は、ぜひ以下の記事を参考にしてみてください。
2020年9月18日に「Vue.js v3.0」がリリースされ、その中でも特にVue Composition APIが注目されています。 Composition APIでは今まで慣れ親しんできたVue2の書き方から一新[…]
それでは、ここまでご覧いただきありがとうございました。