当前位置：网站首页>Issue 37: mapstate analysis

Issue 37: mapstate analysis

2022-07-18 01:46:00 【terrence386】

About Vuex Source code , I feel it is necessary to study it carefully . Look at the code written by others , Then look at the code you usually write , I don't feel at the same level at all .

With Vuex In the source mapState Methods as an example ：

export const mapState = normalizeNamespace((namespace, states) => {
  const res = {}
  if (__DEV__ && !isValidMap(states)) {
    console.error('[vuex] mapState: mapper parameter must be either an Array or an Object')
  }
  normalizeMap(states).forEach(({ key, val }) => {
    res[key] = function mappedState () {
      let state = this.$store.state
      let getters = this.$store.getters
      if (namespace) {
        const module = getModuleByNamespace(this.$store, 'mapState', namespace)
        if (!module) {
          return
        }
        state = module.context.state
        getters = module.context.getters
      }
      return typeof val === 'function'
        ? val.call(this, state, getters)
        : state[val]
    }
    // mark vuex getter for devtools
    res[key].vuex = true
  })
  return res
})

It uses here normalizeNamespace Method . The function of this method is to return a function , Accept namespace and map As a parameter .

function normalizeNamespace (fn) {
  return (namespace, map) => {
    if (typeof namespace !== 'string') {
      map = namespace
      namespace = ''
    } else if (namespace.charAt(namespace.length - 1) !== '/') {
      namespace += '/'
    }
    return fn(namespace, map)
  }
}

then mapState Method is actually equal to normalizeNamespace Method returns the last fn(namespace, map).

That's the code below ：

(namespace, states) => {
  const res = {}
  if (__DEV__ && !isValidMap(states)) {
    console.error('[vuex] mapState: mapper parameter must be either an Array or an Object')
  }
  normalizeMap(states).forEach(({ key, val }) => {
    res[key] = function mappedState () {
      let state = this.$store.state
      let getters = this.$store.getters
      if (namespace) {
        const module = getModuleByNamespace(this.$store, 'mapState', namespace)
        if (!module) {
          return
        }
        state = module.context.state
        getters = module.context.getters
      }
      return typeof val === 'function'
        ? val.call(this, state, getters)
        : state[val]
    }
    // mark vuex getter for devtools
    res[key].vuex = true
  })
  return res
}

This function will first put states Into normalized Map, And then we're going to iterate , redefined res object , Traversal Map Of key Value corresponding value Assign to res object , Finally, this function returns res object .

Do not consider intermediate calls call The process of , It's just mapState Equal to a function , Function finally returns the operation of an object , The process of writing in this way , It seems that I seldom write this myself .

What I wrote , At most, some commonly used , Or use more methods to draw a method , It is possible to receive different parameters , Then return different values , And rarely used call This method .

mapState To put it bluntly, it is still a function , This function will traverse by state Object into Map, Then reassemble it into a new object to return , It's just that when recombining, we will judge whether the corresponding value of each building is a function , If it's a function , Then update the value of this key to the value after the function is executed .

In turn ,mapActions,mapMutations Something like this should be similar .

原网站

版权声明
本文为[terrence386]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/199/202207151037343177.html

边栏推荐

猜你喜欢

随机推荐