Vuex-Projektstrukturverzeichnis und einige einfache Konfigurationseinführungen

In diesem Artikel werden hauptsächlich das Vuex-Projektstrukturverzeichnis und einige einfache Konfigurationen vorgestellt. Freunde, die es benötigen, können darauf verweisen

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

Regeln, die vuex einhalten muss:

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

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 Aktionen gekapselt werden.

Dateiverzeichnisstruktur

Beziehung zwischen Dateien:

Store-Ordner – speichert Dateien der Vuex-Serie

store.js - Vuex einführen, Statusdaten festlegen, Getter, Mutation und Aktion einführen

getter.js - Status im Store abrufen

mutation.js - wird verwendet, um den Status im Store zu ändern Der Ort wo Funktionen gespeichert sind

action.js - Senden Sie Mutationen, um den Status taktvoll zu ändern, der asynchron betrieben werden kann

Einfache und gewöhnliche Schreibmethode

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 (injizieren Sie den Store von der Root-Komponente, genau wie beim Injizieren des Routers):

By im Root Instanz Registrieren Sie die Store-Option. Die Store-Instanz wird in alle Unterkomponenten unter der Stammkomponente eingefügt, und auf die Unterkomponenten kann über this.$store zugegriffen werden.

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

Einfache Konfiguration von Getter.js (berechnete Eigenschaft des Speichers, Status als Parameter akzeptierend)

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

Get (innerhalb der berechneten Eigenschaft einer Komponente):

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

Einfache Konfiguration des passablen Getter-Attributs

export default{

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

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

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

mutation.js einfache Konfiguration:

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

Trigger (in Komponente)

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

Trigger (in Komponente)

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ajax-Bild-Upload basierend auf Firefox

Leistungsoptimierungsmethode für Ajax-Non-Refresh-Paging

Ajax Loading External Page Pop-up-Layer-Effekt-Implementierungsmethode

Das obige ist der detaillierte Inhalt vonVuex-Projektstrukturverzeichnis und einige einfache Konfigurationseinführungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!