使用vue怎么實(shí)現(xiàn)狀態(tài)管理？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

成都創(chuàng)新互聯(lián)公司專注于漢中企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站定制開發(fā)。漢中網(wǎng)站建設(shè)公司,為漢中等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

邏輯圖

從圖上有兩條線: 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ì)象

先看看用戶傳入的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屬性, 值就是用戶輸入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用戶輸入的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組件

用戶輸入

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等于用戶輸入選項(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)有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

分享標(biāo)題：使用vue怎么實(shí)現(xiàn)狀態(tài)管理-創(chuàng)新互聯(lián)
瀏覽地址：http://www.chinadenli.net/article26/jigcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、服務(wù)器托管、營(yíng)銷型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、搜索引擎優(yōu)化、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)