vuex を使用して Vue でグローバルステータスを管理する方法についての実践的な共有-Vue.js-php.cn

vuex を使用して Vue でグローバルステータスを管理する方法についての実践的な共有

PHPz

リリース： 2023-06-09 16:10:35

オリジナル

1116 人が閲覧しました

Vue は人気のあるフロントエンドフレームワークであり、その基本的な考え方は、ページをさまざまなコンポーネントに分割し、各コンポーネントが独自の状態を持つことです。ただし、複数のコンポーネント間で状態を共有する必要がある状況もあります。この状況に対処するために、Vue は、アプリケーションのグローバルな状態を管理するために特別に設計されたサードパーティライブラリである vuex を提供します。この記事では、Vue プロジェクトで vuex を使用した実際の経験をいくつか紹介します。

Vuex とは何ですか?

Vuex は、Vue.js の公式状態管理ツールです。集中ストレージを使用して、単一のオブジェクトを通じて実装されたアプリケーションのすべてのコンポーネントの状態を管理します。

Vuex の中核となる概念は次のとおりです。

State: アプリケーションレベルの状態を保存します。
Getter: state に格納されている値を取得し、計算を実行します。
Mutation: state の値を変更します。
アクション: 変更を送信し、非同期操作を実行します。
モジュール: ストアを複数のサブモジュールに分解します。各モジュールは独自の状態、突然変異、アクションを持つことができます

Vue プロジェクトで Vuex を使用します

For Vue プロジェクトで Vuex を使用するプロセスをデモンストレーションするために、タスクを追加および削除し、タスクリストに表示できる「ToDo リスト」と呼ばれる単純なサンプルアプリケーションを作成します。以下では、Vuex を使用してこの ToDo リストアプリケーションを実装する方法を紹介します。

まず、Vuex を使用するには、Vuex アプリケーションに Vuex をインポートする必要があります。次のように main.js に Vuex オブジェクトをインポートして注入できます:

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    tasks: []
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task)
    },
    removeTask(state, index) {
      state.tasks.splice(index, 1)
    }
  }
})

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

ログイン後にコピー

ここでは、まず Vuex をインポートし、Vue オブジェクトに注入します。次に、Vuex.Store コンストラクターを使用して新しい Vuex ストレージインスタンスを作成する、store という定数を作成します。ここでストア内の状態とミューテーションを定義します。私たちのステータスはタスク配列であり、ToDo リストにタスクを保存します。ミューテーションには、それぞれタスクの追加と削除に使用される addTask と RemoveTask が含まれます。

また、ストアを Vue インスタンスに挿入して、アプリケーションのすべてのコンポーネントで使用できるようにします。これで、コンポーネントのストア内の状態と変異にアクセスできるようになりました。

サンプル ToDo リストアプリケーションには、ユーザーがタスクを追加できるフォームを含む AddTask.vue というコンポーネントがあります。このコンポーネントでは、$store を使用してストア内の状態とミューテーションにアクセスし、addTask ミューテーションをトリガーしてタスクをストアに追加できます。コードは次のとおりです。

<template>
  <form @submit.prevent="addTask">
    <input type="text" v-model="task" />
    <button type="submit">Add Task</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      task: ''
    }
  },
  methods: {
    addTask() {
      this.$store.commit('addTask', this.task)
      this.task = ''
    }
  }
}
</script>

ログイン後にコピー

ここでは、コンポーネントでフォームを使用し、フォームが送信されるときに addTask メソッドを呼び出し、タスク名をパラメータとして $store.commit メソッドに渡します。。これにより、前に定義した addTask ミューテーションがトリガーされ、タスクがストアに追加されます。

次に、タスクのリストを表示し、ユーザーがタスクを削除できるようにする TasksList.vue コンポーネントがあります。このコンポーネントでは、$store を使用してストア内の状態とミューテーションにアクセスし、removeTask ミューテーションをトリガーしてストアからタスクを削除できます。コードは次のとおりです。

<template>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      {{ task }}
      <button @click="removeTask(index)">Remove Task</button>
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    tasks() {
      return this.$store.state.tasks
    }
  },
  methods: {
    removeTask(index) {
      this.$store.commit('removeTask', index)
    }
  }
}
</script>

ログイン後にコピー

ここでは、計算された属性を使用してストア内のタスク配列ステータスを取得します。また、テンプレート内の v-for ディレクティブを使用して各タスクを表示し、各タスクの後に削除ボタンを追加します。ユーザーが削除ボタンをクリックすると、removeTask メソッドが呼び出され、タスクのインデックスがパラメータとして $store.commit メソッドに渡されます。これにより、以前に定義したremoveTaskミューテーションがトリガーされ、ストアからタスクが削除されます。

結論

この記事では、Vuex を使用してアプリケーションのグローバル状態を管理する方法を学び、ToDo リストアプリケーションを通じて Vue プロジェクトで実際に Vuex を使用する方法を示しました。 Vue プロジェクトでは、Vuex を使用すると、状態の管理と共有がより簡単になり、コードがよりモジュール化されて読みやすくなります。 Vue プロジェクトも開発している場合は、アプリケーションの状態をより適切に管理するために Vuex の使用を検討することをお勧めします。

以上がvuex を使用して Vue でグローバルステータスを管理する方法についての実践的な共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。