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.
Avant de plonger dans Vuex, nous devons avoir une compréhension de base de ses concepts de base.
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 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)
}
}
})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 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)
}
}
})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
}
})Maintenant que nous comprenons les bases de Vuex, voyons comment l'utiliser dans une application Vue.js.
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)
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 }
]
}
})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)
}
}
})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
}
}
})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)
})
})
}
}
})À 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
}
})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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
