ホームページ > 記事 > ウェブフロントエンド > Vue3+TS+Vite 開発スキル: 状態管理に Vuex を使用する方法
Vue3 TS Vite 開発スキル: 状態管理に Vuex を使用する方法
はじめに:
Vue 開発では、状態管理は重要なトピックです。 Vue が公式に推奨する状態管理ツールとして、Vuex はプロジェクトで非常によく使用されます。この記事では、Vuex を状態管理に使用し、Vue3、TypeScript、Vite で開発する方法を紹介します。
1. 依存関係をインストールします
まず、Vue3 をサポートするためにプロジェクトに Vuex および vuex@4 バージョンをインストールする必要があります:
npm install vuex@next --save
2. ストアの作成
src ディレクトリにストア ディレクトリを作成し、index.ts ファイルを作成します。 Index.ts ファイルで、Vuex ストア インスタンスを定義し、そのインスタンスをグローバルに使用できるようにエクスポートする必要があります。
// store/index.ts import { createStore } from 'vuex'; const store = createStore({ // 定义state state: { count: 0, }, // 定义mutations mutations: { increment(state) { state.count++; }, }, // 定义actions actions: { incrementAsync(context) { setTimeout(() => { context.commit('increment'); }, 1000); }, }, }); export default store;
3. main.ts を作成します
src ディレクトリの main.ts ファイルで、Vuex ストアをインポートし、createApp 関数でそのストアを使用する必要があります。
// main.ts import { createApp } from 'vue'; import App from './App.vue'; import store from './store'; createApp(App) .use(store) .mount('#app');
4. Vuex の使用
これで、Vuex の基本構成がセットアップされました。次に、コンポーネントで Vuex を使用できます。
App.vue では、mapState
補助関数と mapMutations
補助関数を使用して、ストア内のカウント値をコンポーネントにマップします。ストア内のインクリメントミューテーション。
<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="incrementAsync">Increment Async</button> </div> </template> <script> import { mapState, mapMutations } from 'vuex'; export default { computed: { ...mapState(['count']), }, methods: { ...mapMutations(['increment']), incrementAsync() { this.$store.dispatch('incrementAsync'); }, }, }; </script>
これまでで、Vue3 TS Vite プロジェクトにおける Vuex の基本的な使用法が完了しました。 Vuexを利用することで、アプリケーションのグローバルな状態を簡単に管理し、状態の共有や通信を実現することができ、開発効率やコードの保守性が向上します。
概要:
この記事では、Vue3 TS Vite プロジェクトでの状態管理に Vuex を使用する方法を紹介します。依存関係をインストールし、ストア インスタンスを作成し、Vuex 補助機能を使用することで、プロジェクト内で Vuex を簡単に使用してグローバル状態を管理および共有できます。
以上は、Vue3 TS Vite の開発スキルにおける状態管理に Vuex を使用する方法についての紹介であり、開発の実践に役立つことを願っています。ご質問等ございましたらお気軽にご相談ください。
以上がVue3+TS+Vite 開発スキル: 状態管理に Vuex を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。