Introduction à la structure du projet et à la configuration de vuex

Cette fois, je vais vous présenter la structure et la configuration du projet vuex. Quelles sont les précautions lors de l'utilisation de la structure et de la configuration du projet vuex. Voici des cas pratiques, jetons un coup d'œil.

Tout d'abord, voici un "conseil" sérieux du site officiel :

Les règles que vuex doit respecter :

1. Le statut au niveau de l'application doit être concentré dans un seul objet de magasin .

2. La soumission d'une mutation est le seul moyen de changer d'état, et ce processus est synchrone.

3. Toute logique asynchrone doit être encapsulée dans action.

FichierStructure des répertoires

Relation entre les fichiers :

dossier store - stocke les fichiers de la série vuex

store.js - introduire vuex, définir les données d'état, introduire le getter, la mutation et l'action

getter.js - Obtenez le statut dans le magasin

mutation.js - où sont stockées les fonctions utilisées pour changer l'état dans le magasin

action.js - Soumettre une mutation pour modifier l'état avec tact et peut fonctionner de manière asynchrone

Une écriture simple et courante

Fichier store.js :

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const state = {
 a: '初始值',
 b: 'balabala...'
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})

Dans le fichier main.js (injecter le store depuis le composant racine, tout comme injecter le routeur) :

En enregistrant l'option store dans l'instance racine, l'instance store sera injectée dans tous les composants enfants sous le composant racine, et les composants enfants seront accessibles via this.$store.

import store from './store/index'
new Vue({
 el: '#app',
 router,
 store,
 ...
})

Configuration simple de Getter.js ( attribut du magasin calculé, acceptant l'état en paramètre)

export default {
  doneTodos: state = >{
   return state.todos.filter(todo = >todo.done)
  }
}

Obtenez (à l'intérieur de la propriété calculée d'un composant) :

computed: {
 doneTodosCount () { 
  return this.$store.getters.doneTodosCount 
 }
}

Configuration simple des propriétés du getter pouvant transmettre des paramètres

export default{
 getTodoById: (state) => (id) => { 
  return state.todos.find(todo => todo.id === id) 
 }
}

Get (propriété calculée interne d'un composant) :

computed: {
 getTodoById() { 
  return this.$store.getters.getTodoById(‘参数')
 }
}

configuration simple mutation.js :

export default {
  increment(state) {
   //变更状态
   state.count++
  }
}

Déclencheur (en composant)

this.$store.commit(state,payload)
actions.js简单配置：
export default{
 action (context) {
 //异步操作
  setTimeout（（）=>{
   //变更状态
   context.commit('mutationFunName'，value)
  }）
 }
}

Déclencheur (composant)

this.$store.dispatch('mutationFunctionName')
2018-04-07 18:13:34

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Quelles sont les nouvelles fonctionnalités de vue-cli 3.0.x après la mise à niveau vers webpack4

Comment pour implémenter l'algorithme de déduplication JS dans le tableau JSON

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!