您好,登錄后才能下訂單哦!
使用vue怎么實(shí)現(xiàn)狀態(tài)管理?針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
邏輯圖
從圖上有兩條線: Vue.use(vuec), 與 new Vuec.center(options)
第一條線Vue.use(vuec)安裝插件
使用Vue.use(vuec)時(shí), 會(huì)執(zhí)行vuec的install方法,會(huì)注入?yún)?shù)Vue 所以vuec是這樣的,
// index.js import {Center, install} from './center' export default {Center, install}
Center對(duì)象將實(shí)例化成center(下面再說(shuō)),我們先看看install方法
// center.js let Vue // 全局變量, 保存install里的Vue export function install (_Vue) { if (!Vue) { _Vue.mixin({ beforeCreate: applyMixin // 在beforeCreate鉤子上混入applyMixin函數(shù) }) } Vue = _Vue }
install在Vue原型的beforeCreate混入applyMixin函數(shù), 也就是說(shuō)在生成每個(gè)Vue組件時(shí),在它的生命周期beforeCreate鉤子上就會(huì)執(zhí)行applyMixin方法
第二條線 new Vuec.center(options)實(shí)例化Center對(duì)象
先看看用戶(hù)傳入的options, 下面例子
export default new Vuec.Center({ state: { name: 'liuyang' }, mutations: { changeName (state) { state.name = 'jike' } } })
上面代碼會(huì)生成center實(shí)例, 該實(shí)例上應(yīng)該包括:state狀態(tài),commit方法提交變更等
// center.js export class Center { constructor (options= {}) { let center = this this.mutations = options.mutations observeState(center, options.state) } get state () { // 代理了this.$center.state的最終訪問(wèn)值 return this._vm.$data.$$state } commit (_type, _payload) { this.mutations[_type](this.state, _payload) } } function observeState(center, state) { // 響應(yīng)式state center._vm = new Vue({ data: { $$state: state } }) }
在執(zhí)行new Vuec.Center({..})時(shí),就是執(zhí)行Center的構(gòu)造函數(shù)
首先執(zhí)行l(wèi)et center = this, 定義center保存當(dāng)前實(shí)例
接著執(zhí)行this.mutations = options.mutations, 在實(shí)例center上添加mutations屬性, 值就是用戶(hù)輸入mutations,
按上面例子, this.mutations長(zhǎng)成這樣
this.mutations = { changeName (state) { state.name = 'jike' } }
最后執(zhí)行observeState(center, options.state), 作用:讓center實(shí)例的state屬性指向options.state并且是響應(yīng)式的
function observeState(center, state) { // 響應(yīng)式state center._vm = new Vue({ // 利用Vue的響應(yīng)系統(tǒng),將state轉(zhuǎn)化成響應(yīng)式 data: { $$state: state } }) }
在center實(shí)例上添加_vm屬性, 值是一個(gè)Vue實(shí)例, 在該Vue實(shí)例的data下定義了$$state, 它的值是options.state用戶(hù)輸入的state; 結(jié)合上面的這段代碼
// center.js export class Center { ...省略 get state () { // 代理了this.$center.state的最終訪問(wèn)值 return this._vm.$data.$$state } ...省略 }
所以我們?cè)诮M件中訪問(wèn)center.state其實(shí)就是訪問(wèn)center._vm.$data.$$state
OK, center就構(gòu)建好了
創(chuàng)建Vue組件
用戶(hù)輸入
import Vue from 'vue' import App from './App' import router from './router' import center from './center' new Vue({ el: '#app', router, center, // 構(gòu)建好的center實(shí)例 template: '<App/>', components: {App} })
在beforeCreate生命周期時(shí)會(huì)觸發(fā)上面混入的applyMixin函數(shù)
// mixins.js export default function applyMixin() { vuecInit.call(this) // } function vuecInit () { const options = this.$options // vue的實(shí)例化是從外往內(nèi), 所以父組件的$center一定是options的center this.$center = options.parent?options.parent.$center: options.center }
applyMixin里會(huì)執(zhí)行vuecInit.call(this), 這里的this指向當(dāng)前組件的實(shí)例,
接著看vuecInit, 定義了options等于用戶(hù)輸入選項(xiàng),因?yàn)橄葎?chuàng)建根組件, 所以根組件this.$center的值的引用就是我們?cè)趎ew Vue({..center})時(shí)傳入的center實(shí)例, 下面所有組件都指向它
OK, 你就可以在組件里使用this.$center訪問(wèn)了
commit變更
// center.js export class Center { ... 省略 commit (_type, _payload) { this.mutations[_type](this.state, _payload) } }
通常我們變更時(shí): this.$center.commit('changeName', 'jike'), 這樣的話, this.mutations[_type]就是對(duì)應(yīng)方法函數(shù), 往該函數(shù)里傳入state以及payload,
舉上面的例子
// this.mutations[_type] , _type = 'changeName', payload= 'jike' this.mutations = { changeName (state, payload) { state.name = payload } }
關(guān)于使用vue怎么實(shí)現(xiàn)狀態(tài)管理問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開(kāi),可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。