Vuexの基礎
Vuexストアと集中管理された状態を理解します
「Vuexの基礎」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
状態を一元管理する理由
Vueアプリが大きくなると、多くのコンポーネント間でデータを共有することが難しくなります。深くネストされたコンポーネントツリーでpropsを下へ渡し、イベントを上へ通知する方法は壊れやすいものです。Vuexは、どのコンポーネントからでも予測可能な方法で読み書きできる、単一の一元化されたストアによってこの問題を解決します。
単一の信頼できる情報源
Vuexは一方向のデータフローに従います。共有するアプリケーションの状態はすべて、ストアと呼ばれる1か所に保存されます。コンポーネントはストアから状態を読み取り、制御されたAPIを通じて変更を要求するため、データの出所と変更方法を常に把握できます。
Vuexのインストール
Vuex 4はVue 3向けに作られたバージョンです。パッケージマネージャーでインストールした後、ストアを作成してアプリに登録します。
npm install vuex@4ストアの作成
createStoreを使ってストアを定義します。stateオプションには、初期状態を表すリアクティブなオブジェクトを返す関数を指定します。
import { createStore } from "vuex"
export const store = createStore({
state() {
return {
count: 0,
user: null
}
}
})ストアの登録
app.use(store)でストアをアプリに渡します。これにより、すべてのコンポーネントからthis.$storeを通じて利用できるようになります。
import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"
const app = createApp(App)
app.use(store)
app.mount("#app")stateプロパティ
stateオブジェクトにはアプリケーションのデータが格納されます。リアクティブなので、stateが変化すると、それを使用しているコンポーネントは自動的に再レンダリングされます。アプリ全体のdata()に相当するものと考えてください。
state() {
return {
todos: [],
isLoading: false,
theme: "light"
}
}Options APIでのstateへのアクセス
コンポーネント内では、this.$store.stateを通じてストアにアクセスします。computedプロパティを使うと、値のリアクティブ性を維持できます。
export default {
computed: {
count() {
return this.$store.state.count
}
}
}テンプレートでのstateの使用
computedプロパティを通じて公開すれば、テンプレート内ではローカルな値と同じようにstateを使用できます。
<template>
<p>Current count: {{ count }}</p>
</template>mapStateヘルパー
多くのcomputedプロパティを手作業で書くのは繰り返しが多くなります。mapStateヘルパーを使うと、state名の配列からそれらを自動生成できます。
import { mapState } from "vuex"
export default {
computed: {
...mapState(["count", "user"])
}
}名前を変更したmapState
mapStateにオブジェクトを渡すと、プロパティ名を変更したり、stateから派生した値を計算したりできます。
computed: {
...mapState({
total: "count",
userName: (state) => state.user ? state.user.name : "Guest"
})
}Composition APIでのstateへのアクセス
Composition APIでは、setup内でuseStore()を呼び出してストアのインスタンスを取得し、computedを通じてstateを読み取ります。
import { computed } from "vue"
import { useStore } from "vuex"
export default {
setup() {
const store = useStore()
const count = computed(() => store.state.count)
return { count }
}
}理解度チェック
Vuexの基本についての理解度を確認します。
まとめ
Vuexは、単一の信頼できる情報源として、一元化されたリアクティブなストアを提供します。createStoreで作成し、app.useで登録した後、computedプロパティまたはmapStateヘルパーを通じてstateを読み取ります。Composition APIではuseStore()でストアにアクセスします。次は、そのstateを安全に変更する方法を学びます。
よくある質問
「Vuexの基礎」レッスンは無料ですか？
はい。「Vuexの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「Vuexの基礎」で何を学びますか？
Vuexストアと集中管理された状態を理解します ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「Vuexの基礎」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。