Comment utiliser le répertoire et la configuration de la structure du projet vuex

Cette fois, je vais vous montrer comment utiliser le répertoire et la configuration de la structure du projet vuex, et quelles sont les précautions à prendre pour utiliser le répertoire et la configuration de la structure du projet vuex. Ce qui suit est un cas pratique, jetons un coup d'œil.

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. Soumettre une mutation est le seul moyen de changer d'état, et ce processus est synchrone.

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

Structure des répertoires de fichiers

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 getter, mutation et action

getter.js - obtenir le statut dans le magasin

mutation.js - utilisé pour changer le statut dans le magasin Le lieu où les fonctions sont stockées

action.js - Soumettez des mutations pour modifier avec tact l'état, qui peut être utilisé de manière asynchrone

Méthode d'écriture simple et ordinaire

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 à partir du composant racine, tout comme injecter le routeur) :

En enregistrant l'option store dans l'instance racine, l'instance store sera être injecté dans tous les sous-composants sous le composant racine, et les sous-composants sont accessibles via this.$store.

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

Configuration simple de Getter.js (propriété calculée du magasin, acceptant l'état comme paramètre)

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

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

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

Configuration simple des attributs getter passables

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

Obtenir (propriétés calculées internes d'un composant) :

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

Configuration simple de 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 (en composant)

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article Merci de payer. attention pour des choses plus excitantes. Autres articles connexes sur le site Web php chinois !

Lecture recommandée :

le chargement paresseux de vue-router optimise la vitesse de chargement

JS utilise createElement() pour ajouter dynamiquement du HTML

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!