這篇文章將為大家詳細講解有關vuex之store的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)主營薌城網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,重慶APP開發(fā)公司,薌城h5微信小程序搭建,薌城網(wǎng)站營銷推廣歡迎薌城等地區(qū)企業(yè)咨詢

使用Vuex的時候，通常會實例化Store類，然后傳入一個對象，包括我們定義好的actions、getters、mutations、state等。store的構造函數(shù)：

export class Store {
 constructor (options = {}) {
  // 若window內(nèi)不存在vue，則重新定義Vue
  if (!Vue && typeof window !== 'undefined' && window.Vue) {
   install(window.Vue)
  }

  if (process.env.NODE_ENV !== 'production') {
   // 斷言函數(shù)，來判斷是否滿足一些條件
   // 確保 Vue 的存在
   assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
   // 確保 Promsie 可以使用
   assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
   assert(this instanceof Store, `store must be called with the new operator.`)
  }

  // 解構賦值，拿到options里的plugins和strict
  const {
   plugins = [],
   strict = false
  } = options

  // 創(chuàng)建內(nèi)部屬性
  // 標志一個提交狀態(tài)，作用是保證對 Vuex 中 state 的修改只能在 mutation 的回調(diào)函數(shù)中，而不能在外部隨意修改 state
  this._committing = false 
  // 用來存儲用戶定義的所有的actions
  this._actions = Object.create(null)
  this._actionSubscribers = []
  // 用來存儲用戶定義所有的mutatins
  this._mutations = Object.create(null)
  // 用來存儲用戶定義的所有getters 
  this._wrappedGetters = Object.create(null)
  // 用來存儲所有的運行時的 modules
  this._modules = new ModuleCollection(options)
  this._modulesNamespaceMap = Object.create(null)
  // 用來存儲所有對 mutation 變化的訂閱者
  this._subscribers = []
  // 一個 Vue對象的實例，主要是利用 Vue 實例方法 $watch 來觀測變化的
  this._watcherVM = new Vue()

  // 把Store類的dispatch和commit的方法的this指針指向當前store的實例上
  const store = this
  const { dispatch, commit } = this
  this.dispatch = function boundDispatch (type, payload) {
   return dispatch.call(store, type, payload)
  }
  this.commit = function boundCommit (type, payload, options) {
   return commit.call(store, type, payload, options)
  }

  // 是否開啟嚴格模式
  this.strict = strict

  const state = this._modules.root.state

  // Vuex的初始化的核心，其中，installModule方法是把我們通過options傳入的各種屬性模塊注冊和安裝；
  // resetStoreVM 方法是初始化 store._vm，觀測 state 和 getters 的變化；最后是應用傳入的插件。
  installModule(this, state, [], this._modules.root)

  resetStoreVM(this, state)
  plugins.forEach(plugin => plugin(this))

  const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools
  if (useDevtools) {
   devtoolPlugin(this)
  }
 }

Vuex本身是單一狀態(tài)樹，應用的所有狀態(tài)都包含在一個大對象內(nèi)，隨著我們應用規(guī)模的不斷增長，這個Store變得非常臃腫。為了解決這個問題，Vuex允許我們把store分模塊。每一個模塊包含各自的state、mutations、actions和getters，甚至還可以嵌套模塊。

接下來看installModule方法：

function installModule (store, rootState, path, module, hot) {
 // 通過path數(shù)組的長度判斷是否為根
 const isRoot = !path.length
 const namespace = store._modules.getNamespace(path)

 // register in namespace map
 if (module.namespaced) {
  store._modulesNamespaceMap[namespace] = module
 }

 // 第一次調(diào)用時，path為空，不進入if
 // 遞歸調(diào)用installModule安裝子模塊時，將執(zhí)行該代碼塊
 if (!isRoot && !hot) {
  const parentState = getNestedState(rootState, path.slice(0, -1))
  // 模塊名
  const moduleName = path[path.length - 1]
  // 把當前模塊的state添加到parentState中。具體解析見下
  store._withCommit(() => {
   Vue.set(parentState, moduleName, module.state)
  })
 }

 const local = module.context = makeLocalContext(store, namespace, path)

 // 對mutations、actions、getters進行注冊
 module.forEachMutation((mutation, key) => {
  const namespacedType = namespace + key
  registerMutation(store, namespacedType, mutation, local)
 })

 module.forEachAction((action, key) => {
  const type = action.root ? key : namespace + key
  const handler = action.handler || action
  registerAction(store, type, handler, local)
 })

 module.forEachGetter((getter, key) => {
  const namespacedType = namespace + key
  registerGetter(store, namespacedType, getter, local)
 })

 // 遍歷modules，遞歸調(diào)用installModule安裝子模塊
 module.forEachChild((child, key) => {
  installModule(store, rootState, path.concat(key), child, hot)
 })
}
store的_withCommit方法定義是這樣的:

 _withCommit (fn) {
  const committing = this._committing
  this._committing = true
  fn()
  this._committing = committing
 }

Vuex中所有對state的修改都會用_withCommit函數(shù)包裝，保證在同步修改state的過程中this._committing的值始終為true。這樣當我們觀測 state的變化時，如果this._committing的值不為true，則能檢查到這個狀態(tài)修改是有問題的。

關于“vuex之store的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文題目：vuex之store的示例分析
文章鏈接：http://chinadenli.net/article30/ipcsso.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站維護、外貿(mào)網(wǎng)站建設、用戶體驗、網(wǎng)站改版、動態(tài)網(wǎng)站

廣告

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