So verwenden Sie das Strukturverzeichnis und die Konfiguration des Vuex-Projekts

Dieses Mal zeige ich Ihnen, wie Sie das Vuex-Projektstrukturverzeichnis und die Konfiguration verwenden und welche Vorsichtsmaßnahmen für die Verwendung des Vuex-Projektstrukturverzeichnisses und der Konfiguration gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Die Regeln, die Vuex befolgen 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):

Durch die Registrierung der Store-Option in der Root-Instanz wird die Store-Instanz injiziert in die Stammkomponente in allen Unterkomponenten darunter, 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 
 }
}

kann übergeben werden Einfache Konfiguration des Getter-Attributs des Parameters

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

Get (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 der 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:

Vue-Router Lazy Loading optimiert die Ladegeschwindigkeit

JS verwendet createElement(), um HTML dynamisch hinzuzufügen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Strukturverzeichnis und die Konfiguration des Vuex-Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!