Comment utiliser vuex pour gérer les données globales et le statut dans Vue

Vue.js est un framework frontal populaire capable de créer des interfaces utilisateur hautement maintenables et réutilisables. L'un de ses principaux avantages est qu'il est très facile à apprendre et à utiliser, et qu'il fonctionne de manière transparente avec d'autres bibliothèques et frameworks. Cependant, lorsque votre application commence à devenir de plus en plus complexe, vous pouvez rencontrer un problème : comment gérer l'état global et les données ? C'est le problème que Vuex résout.

Vuex est une bibliothèque de gestion d'état conçue spécifiquement pour Vue.js. Son objectif principal est de rendre le maintien de l’État plus gérable. Vuex présente une « source de données » unique et la gère de manière prévisible.

Dans cet article, nous présenterons les bases de Vuex et montrerons comment l'utiliser dans Vue.js pour gérer l'état et les données globaux.

Bases de Vuex

Avant de plonger dans Vuex, nous devons avoir une compréhension de base de ses concepts de base.

State

State est un objet qui stocke l'état de l'application. Dans Vuex, l'état est réactif, ce qui signifie que lorsqu'un état change, tous les composants utilisant cet état seront automatiquement mis à jour. Normalement, vous devez initialiser l'état sur un objet vide.

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

Getter

Getter est une fonction utilisée pour obtenir des données de l'État. Getter peut être utilisé lorsque nous devons calculer ou filtrer le statut. Le getter accepte l'état comme premier paramètre. Les getters peuvent être des propriétés ou des fonctions calculées.

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

La mutation est utilisée pour changer l'état. Lorsque vous changez d'état, vous devez utiliser Mutation au lieu de changer d'état directement. Cette convention nous permet de suivre chaque changement d'état et de déboguer ou de revenir en arrière au fur et à mesure que ces changements se produisent. La mutation doit être synchrone.

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

Action

Action est utilisé pour effectuer des tâches asynchrones et soumettre une mutation. Les actions contiennent souvent une logique asynchrone, telle que des appels d'API. Lorsqu'une action est appelée, elle commet des mutations plutôt que de changer d'état directement. Les applications

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

Module

Vuex ont généralement une grande arborescence d'états. Pour rendre l'arborescence des états maintenable, elle peut être divisée en plusieurs modules distincts. Les modules nous permettent d'organiser facilement notre code et d'isoler l'état.

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
    }
})

Gérer l'état global avec Vuex

Maintenant que nous comprenons les bases de Vuex, voyons comment l'utiliser dans une application Vue.js.

Installer Vuex

Pour utiliser Vuex, installez-le d'abord dans votre projet. Il peut être installé en utilisant npm :

npm install vuex --save

Après l'installation, vous devez le configurer dans Vue.js en appelant la méthode Vue.use() :

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

Vue.use(Vuex)

Define State

Créons une application Todo List très simple, pour démontrer comment utiliser Vuex avec Vue.js.

Tout d'abord, nous devons définir un état initial, dans ce cas nous définirons un tableau de tâches :

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 }
        ]
    }
})

Obtenir l'état

Maintenant que notre état est défini, voyons comment obtenir l'état en utilisant Getter.

Getter nous permet d'obtenir des données de l'État et d'effectuer des calculs. Dans notre application Todo List, nous pouvons utiliser des Getters pour obtenir un statut spécifique ou des tâches terminées et inachevées.

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

Si vous souhaitez changer l'état, vous devez utiliser Mutation. En fonction de notre application, nous pouvons définir deux mutations : ajouter Todo et basculer l'état d'achèvement.

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
        }
    }
})

Exécuter des actions

Dans notre application Todo List, nous devrons peut-être effectuer certaines opérations asynchrones. Par exemple, si vous souhaitez obtenir des tâches du serveur, vous devez utiliser une action asynchrone.

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)
                })
            })
        }
    }
})

Utiliser des modules

À mesure que votre état Vuex devient plus complexe, vous devrez peut-être le diviser en plusieurs modules.

Dans notre application, nous pouvons diviser l'état de l'application Todo List en deux modules : Todo et User. Le module Todo contient les données de la liste Todo et les opérations associées. Le module Utilisateur contient des informations utilisateur.

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
    }
})

Résumé

Vuex est une bibliothèque de gestion d'état très puissante qui nous aide à gérer avec élégance l'état et les données des applications Vue.js. En utilisant Vuex, nous pouvons facilement accéder et modifier l'état global sans avoir à transmettre manuellement les données entre les composants. N'oubliez pas que la meilleure pratique consiste à utiliser Vuex à la demande, en cas de besoin. Pour des applications simples, la simple utilisation de l'état local des composants peut suffire à répondre pleinement à vos besoins. Cependant, si votre application devient de plus en plus complexe, vous pouvez envisager d'utiliser Vuex pour gérer l'état.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!