初心者のための Vue.js Vuex を使用した VueJs パーツの状態管理

Vue.js アプリケーションでの状態の管理は、アプリが成長するにつれて複雑になる可能性があります。この投稿では、Vue.js の公式状態管理ライブラリである Vuex を使用して状態を効果的に管理する方法を検討します。

- Vuex とは何ですか?
Vuex は、Vue.js アプリケーションの状態管理パターン ライブラリです。これは、アプリケーション内のすべてのコンポーネントの集中ストアとして機能し、コンポーネント間でのデータの共有を容易にします。これは、予測可能な方法で状態を管理するのに役立ちます。

- Vuex のインストール
Vuex を使い始めるには、まず Vuex をインストールする必要があります。 Vue CLI を使用している場合は、プロジェクトの作成時に Vue CLI のインストールを選択できます。すでにプロジェクトがある場合は、npm:
経由でインストールします。

npm install vuex@next --save

Vuex のセットアップ

- ストアを作成します
srcディレクトリにstoreという名前の新しいフォルダーを作成し、そのフォルダー内にindex.jsというファイルを作成します。このファイルには Vuex ストア構成が保持されます。 この例では、カウント値を加算および減算する単純なストアを作成します。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0, // Example state
  },
  mutations: {
    increment(state) {
      state.count++; // Mutates the state
    },
    decrement(state) {
      state.count--; // Mutates the state
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment'); // Commits the mutation
    },
    decrement({ commit }) {
      commit('decrement'); // Commits the mutation
    },
  },
  getters: {
    getCount(state) {
      return state.count; // Access state value
    },
  },
});

- Vuex ストアをアプリケーションに統合します
次に、Vuex ストアをメインの Vue インスタンスに統合します。 main.js ファイルを編集します:

import Vue from 'vue';
import App from './App.vue';
import store from './store'; // Import the store

new Vue({
  el: '#app',
  store, // Add the store to the Vue instance
  render: h => h(App),
});

コンポーネントでの Vuex の使用

Vuex のセットアップが完了したので、コンポーネントで Vuex を使用する方法を見てみましょう。以下は、コンポーネントから状態にアクセスして変更する方法の例です。

- 状態へのアクセス
this.$store.state:
を使用して状態にアクセスできます。

<template>
  <div>
    <h1 id="Count-count">Count: {{ count }}</h1>
    <button>Increment</button>
    <button>Decrement</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.getCount; // Access getter
    },
  },
  methods: {
    increment() {
      this.$store.dispatch('increment'); // Dispatch action
    },
    decrement() {
      this.$store.dispatch('decrement'); // Dispatch action
    },
  },
};
</script>

結論

この投稿では、Vuex を使用した Vue.js での状態管理の基本について説明しました。 Vuex を使用すると、アプリケーションの状態管理がより構造化され、予測可能になります。シリーズの次のパートでは、Vuex のモジュールや非同期アクションなど、より高度なトピックを検討します。

この投稿がお役に立てば幸いです!ご質問やコメントがございましたら、お気軽に下記に残してください?

以上が初心者のための Vue.js Vuex を使用した VueJs パーツの状態管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。