Einführung in das Projektverzeichnis und die Konfiguration von vuex

Dieses Mal werde ich Ihnen eine Einführung in das Vuex-Projektverzeichnis und die Konfiguration geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Vuex-Projektverzeichnisses und der Konfigurationseinführung?

Die Regeln, die Vuex einhalten muss:

1. Der Status auf Anwendungsebene sollte in einem einzigen Store-Objekt konzentriert werden.

2. Das Einreichen einer Mutation ist die einzige Möglichkeit, den Zustand zu ändern, und dieser Prozess ist synchron.

3. Die gesamte asynchrone Logik sollte in Aktion gekapselt sein.

DateiVerzeichnisstruktur

Beziehung zwischen Dateien:

Store-Ordner – speichert Dateien der Vuex-Serie

store.js – Vuex einführen, Zustandsdaten festlegen, Getter, Mutation und Aktion einführen

getter.js – Status im Store abrufen

mutation.js – Hier werden Funktionen gespeichert, die zum Ändern des Status im Store verwendet werden

action.js – Senden Sie eine Mutation, um den Status taktvoll zu ändern, und können Sie asynchron arbeiten

Einfaches und allgemeines Schreiben

store.js-Datei:

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

In der main.js-Datei (fügen Sie den Store von der Root-Komponente ein, genau wie beim Einfügen des Routers):

Durch die Registrierung der Store-Option in der Root-Instanz wird die Store-Instanz in alle untergeordneten Komponenten unter der Root-Komponente eingefügt, und auf die untergeordneten Komponenten kann über this.$store zugegriffen werden.

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

Einfache Konfiguration von Getter.js (berechnetes Attribut des Speichers , akzeptiert den Status als Parameter)

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

Holen Sie sich (innerhalb der berechneten Eigenschaft einer Komponente):

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

Einfache Konfiguration von Getter-Eigenschaften, die Parameter übergeben können

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

Get (interne berechnete Eigenschaft einer Komponente):

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

mutation.js einfache Konfiguration:

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

Auslöser (in Komponente)

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

Trigger (Komponente)

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie die Iterator-Schnittstelle von PHP Iterator

php dekomprimiert den Inhalt des Zip-Pakets in das angegebenes Verzeichnis Detaillierte Erläuterung der Schritte

Das obige ist der detaillierte Inhalt vonEinführung in das Projektverzeichnis und die Konfiguration von vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!