Heim >Web-Frontend >js-Tutorial >Verstehen Sie die Verwendung von Mutationen in Vuex
Dieser Artikel stellt hauptsächlich das Verständnis der Verwendung von Mutationen in Vue vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen Mutationen?
Das im vorherigen Artikel erwähnte
dient der vorläufigen Erfassung und einfachen Verarbeitung der Daten in
Die Ansicht wird durch Daten gesteuert, was bedeutet, dass sich die Daten in getters
dynamisch ändern. Denken Sie daran, dass die einzige Möglichkeit, die Daten in state
zu ändern, darin besteht, Vue
zu ändern. state
Vuex
store
Populäres Verständnis mutation
enthält eine Sammlung von Methoden zum Ändern von Daten. Dies ist ein sehr wichtiger Punkt im Entwurf von
, der darin besteht, alle logischen Methoden zur Datenverarbeitung in . Trennen Sie Daten und Ansichten.
mutations
Veux
2. Wie nutzt man Mutationen? mutations
Mutationsstruktur: Jedes verfügt über einen Zeichenfolgentyp-Ereignistyp () und eine Rückruffunktion (
), die auch als
auf, wenn der Antworttyp ausgelöst wird. Beim Aufruf von mutation
müssen Sie die Methode type
verwenden. handler
{type:handler()},
handker()
type
const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { //注册时间,type:increment,handler第一个参数是state; // 变更状态 state.count++}}}) store.commit('increment') //调用type,触发handler(state)
store.commit
an
zu übergeben; normalerweise handelt es sich um ein Objekt.handler(stage)
mutations: { increment (state, n) { state.count += n}} store.commit('increment', 10) mutation-types:将常量放在单独的文件中,方便协作开发。 // mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION' // store.js import Vuex from 'vuex' import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({ state: { ... }, mutations: { // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名 [SOME_MUTATION] (state) { // mutate state } } })
handler(stage,pryload)
in der zu übermittelnden Komponente
oder mithilfe der-Hilfsfunktion erfolgen Um
in der Komponente zu übergeben, wird 🎜> dem Aufruf zugeordnet (muss this.$store.commit('xxx')
in den Wurzelknoten einfügen). mutation
mapMutations
methods
store.commit
import { mapMutations } from 'vuex' export default { methods: { ...mapMutations([ 'increment' // 映射 this.increment() 为 this.$store.commit('increment')]), ...mapMutations({ add: 'increment' // 映射 this.add() 为 this.$store.commit('increment') })}}
store
: Initialisierung
registerMutation
function registerMutation (store, type, handler, path = []) { //4个参数,store是Store实例,type为mutation的type,handler,path为当前模块路径 const entry = store._mutations[type] || (store._mutations[type] = []) //通过type拿到对应的mutation对象数组 entry.push(function wrappedMutationHandler (payload) { //将mutation包装成函数push到数组中,同时添加载荷payload参数 handler(getNestedState(store.state, path), payload) //通过getNestedState()得到当前的state,同时添加载荷payload参数 }) }
mutation
:anrufen
commit
commit (type, payload, options) { // 3个参数,type是mutation类型,payload载荷,options配置 if (isObject(type) && type.type) { // 当type为object类型, options = payload payload = type type = type.type } const mutation = { type, payload } const entry = this._mutations[type] // 通过type查找对应的mutation if (!entry) { //找不到报错 console.error(`[vuex] unknown mutation type: ${type}`) return } this._withCommit(() => { entry.forEach(function commitIterator (handler) { // 遍历type对应的mutation对象数组,执行handle(payload)方法 //也就是开始执行wrappedMutationHandler(handler) handler(payload) }) }) if (!options || !options.silent) { this._subscribers.forEach(sub => sub(mutation, this.state)) //把mutation和根state作为参数传入 } }
mutation
:abonnieren
subscribers
store
subscribe (fn) { const subs = this._subscribers if (subs.indexOf(fn) < 0) { subs.push(fn) } return () => { const i = subs.indexOf(fn) if (i > -1) { subs.splice(i, 1) } } }
mutation
Das obige ist der detaillierte Inhalt vonVerstehen Sie die Verwendung von Mutationen in Vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!