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 サイトの他の関連記事を参照してください。