初心者のための Vue.js Vuex を使用した VueJs パーツの状態管理-jsチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-10-16 12:24:29

オリジナル

212 人が閲覧しました

Vue.js for Beginners VueJs Part State Management with Vuex

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>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">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>

ログイン後にコピー