Introduction au répertoire du projet et configuration de vuex

Cette fois, je vais vous apporter une introduction au répertoire du projet et à la configuration de vuex. Quelles sont les précautions lors de l'utilisation du répertoire du projet vuex et une introduction à la configuration. Voici un cas pratique, jetons un coup d'œil. .

Les règles que vuex doit respecter :

1. L'état 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 :

Comment utiliser l'interface itérateur de PHP Iterator

php décompresse le contenu du package zip en répertoire spécifié Explication détaillée des étapes

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!