vuex を使用して Vue でグローバル データとステータスを管理する方法

Vue.js は、保守性と再利用性の高いユーザー インターフェイスを構築できる人気のフロントエンド フレームワークです。その主な利点の 1 つは、学習と使用が非常に簡単で、他のライブラリやフレームワークとシームレスに動作することです。ただし、アプリケーションがますます複雑になり始めると、グローバルな状態とデータをどのように管理するかという問題に遭遇する可能性があります。これは Vuex が解決する問題です。

Vuex は、Vue.js 専用に設計された状態管理ライブラリです。その主な目的は、状態の維持をより管理しやすくすることです。 Vuex は単一の「データ ソース」を提示し、それを予測可能な方法で管理します。

この記事では、Vuex の基本を紹介し、Vue.js で Vuex を使用してグローバルな状態とデータを管理する方法を説明します。

Vuex の基本知識

Vuex について詳しく説明する前に、Vuex の中心となる概念を基本的に理解する必要があります。

State

State は、アプリケーションの状態を格納するオブジェクトです。 Vuex では、状態はリアクティブです。つまり、状態が変化すると、その状態を使用するすべてのコンポーネントが自動的に更新されます。通常、状態を空のオブジェクトに初期化する必要があります。

const store = new Vuex.Store({
    state: {
        count: 0
    }
})

Getter

Getter は、状態からデータを取得するために使用される関数です。 Getter は、ステータスを計算またはフィルターする必要がある場合に使用できます。ゲッターは最初の引数として状態を受け入れます。ゲッターは、計算されたプロパティまたは関数にすることができます。

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false }
        ]
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        todoById: (state) => (id) => {
            return state.todos.find(todo => todo.id === id)
        }
    }
})

Mutation

Mutation は状態を変更するために使用されます。状態を変更する場合は、状態を直接変更するのではなく、Mutation を使用する必要があります。この規則により、すべての状態変化を追跡し、これらの変化が発生したときにデバッグまたはバックトラックすることができます。突然変異は同期的である必要があります。

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
})

Action

Action は、非同期タスクを実行し、Mutation を送信するために使用されます。アクションには、API 呼び出しなどの非同期ロジックが含まれることがよくあります。アクションが呼び出されると、状態を直接変更するのではなく、ミューテーションをコミットします。

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    },
    actions: {
        incrementAsync ({ commit }) {
            setTimeout(() => {
                commit('increment')
            }, 1000)
        }
    }
})

Module

Vuex アプリケーションには通常、大きな状態ツリーがあります。状態ツリーを保守しやすくするために、状態ツリーをいくつかの個別のモジュールに分割できます。モジュールを使用すると、コードを簡単に整理し、状態を分離できます。

const counterModule = {
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    },
    actions: {
        incrementAsync ({ commit }) {
            setTimeout(() => {
                commit('increment')
            }, 1000)
        }
    }
}

const store = new Vuex.Store({
    modules: {
        counter: counterModule
    }
})

Vuex を使用したグローバル状態の管理

Vuex の基本を理解したところで、Vuex を Vue.js アプリケーションで使用する方法を見てみましょう。

Vuex のインストール

Vuex を使用するには、まずプロジェクトに Vuex をインストールします。 npm を使用してインストールできます:

npm install vuex --save

インストール後、Vue.use() メソッドを呼び出して Vue.js に設定する必要があります:

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

Vue.use(Vuex)

Define State

Let Vue.js で Vuex を使用する方法を示す、非常に単純な Todo List アプリケーションを作成してみましょう。

最初に初期状態を定義する必要があります。この場合、todo の配列を定義します。

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    }
})

GetState

次に状態を定義します。その方法を見てみましょう。 Getterを使用してステータスを取得します。

Getter を使用すると、状態からデータを取得して計算を実行できます。 Todo リスト アプリケーションでは、ゲッターを使用して特定のステータスや完了した Todo と未完了の Todo を取得できます。

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    }
})

Change State

状態を変更したい場合は、Mutation を使用する必要があります。アプリケーションに応じて、Todo の追加と完了ステータスの切り替えという 2 つのミューテーションを定義できます。

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    }
})

アクションの実行

ToDo リスト アプリケーションでは、いくつかの非同期操作を実行する必要がある場合があります。たとえば、サーバーから todo を取得したい場合は、非同期アクションを使用する必要があります。

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    },
    actions: {
        loadTodos: ({ commit }) => {
            api.getTodos(todos => {
                todos.forEach(todo => {
                    commit('addTodo', todo)
                })
            })
        }
    }
})

モジュールの使用

Vuex 状態がより複雑になると、それを複数のモジュールに分割することが必要になる場合があります。

私たちのアプリケーションでは、Todo List アプリケーションの状態を Todo と User の 2 つのモジュールに分割できます。 Todo モジュールには、Todo リスト データと関連する操作が含まれています。 User モジュールにはユーザー情報が含まれています。

const todoModule = {
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    },
    actions: {
        loadTodos: ({ commit }) => {
            api.getTodos(todos => {
                todos.forEach(todo => {
                    commit('addTodo', todo)
                })
            })
        }
    }
}

const userModule = {
    state: {
        user: null
    },
    mutations: {
        setUser: (state, user) => {
            state.user = user
        },
        clearUser: (state) => {
            state.user = null
        }
    },
    actions: {
        login: ({ commit }, user) => {
            api.login(user, () => {
                commit('setUser', user)
            })
        },
        logout: ({ commit }) => {
            api.logout(() => {
                commit('clearUser')
            })
        }
    }
}

const store = new Vuex.Store({
    modules: {
        todo: todoModule,
        user: userModule
    }
})

概要

Vuex は、Vue.js アプリケーションの状態とデータをエレガントに管理するのに役立つ、非常に強力な状態管理ライブラリです。 Vuex を使用すると、コンポーネント間でデータを手動で渡すことなく、グローバル状態に簡単にアクセスして変更できます。ベスト プラクティスは、必要に応じて Vuex をオンデマンドで使用することであることに注意してください。単純なアプリケーションの場合、ローカル コンポーネントの状態を使用するだけでニーズを十分に満たすことができる場合があります。ただし、アプリケーションがますます複雑になる場合は、Vuex を使用して状態を管理することを検討することもできます。

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