Einführung in die Projektstruktur und Konfiguration von vuex

Dieses Mal werde ich Ihnen die Projektstruktur und -konfiguration von Vuex vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Vuex-Projektstruktur und -Konfiguration?

Hier zunächst ein ernstzunehmender „Ratschlag“ von der offiziellen Website:

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:

Was sind die neuen Funktionen von vue-cli 3.0.x nach dem Upgrade auf webpack4

Wie um den JS-Deduplizierungsalgorithmus innerhalb des JSON-Arrays zu implementieren

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