Исходный код Vuex: подробная вспомогательная функция vuex mapState

внешний интерфейс JavaScript Vue.js Vuex

предисловие

Когда компоненту необходимо получить несколько состояний, объявление вычисляемых свойств становится повторяющимся и избыточным. Мы можем использовать вспомогательную функцию mapState, чтобы генерировать вычисляемые свойства быстрее и точнее.

Поэтому мы должны четко понимать, что роль mapState заключается в том, чтобы помочь нам преобразовать значения в объекте или массиве в вычисляемое свойство. Точно так же другие вспомогательные функции аналогичны, пока вы знаете реализацию mapState, остальные в основном понятны.

Примечание. На этот раз я читаю vuex версии 2.0.0, пожалуйста, отметьте исходный код.здесь.

Подготовить

Перед интерпретацией нам необходимо ознакомиться с использованием некоторых методов:

интерпретировать

Во-первых, воспользуемся mapState:

import { mapState } from 'vuex'

export default {
  computed: mapState([
    // 映射 this.count 为 store.state.count
    'count'
  ])
}

mapState возвращает объект, и мы знаем, что приведенный выше код будет выглядеть следующим образом:

import { mapState } from 'vuex'

export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

Итак, давайте посмотрим, что делает mapState.

Еще из API vuex откройте файл src/index.js, вы можете увидеть mapState, выставленный vuex в нижнем коде:

export default {
  Store,
  install,
  mapState,
  mapMutations,
  mapGetters,
  mapActions
}

После позиционирования вы можете найти передний импорт:

import { mapState, mapMutations, mapGetters, mapActions } from './helpers'

Открытьsrc/helpers.jsфайл, содержащий реализацию mapState.

normalizeMap

Если вы хотите узнать, как реализуется метод mapStat, вы должны знать его внутреннюю часть.normalizeMapреализации этого метода. Найдите и найдитеnormalizeMapметод:

function normalizeMap (map) {
  return Array.isArray(map)
    ? map.map(key => ({ key, val: key }))
    : Object.keys(map).map(key => ({ key, val: map[key] }))
}

Этот метод в основномОтформатируйте параметр состояния, переданный mapState. Мы будем знать, что параметр состояния будет иметь две формы: одна передается как массив, а другая передается как объект.

Например следующий код:

// 以数组的方式传入
mapState([
  'count',
  'add'
])

// 以对象的方法传入
mapState({
  count: state => state.count,
  countAlias: 'count'
})

проходить черезnormalizeMapПосле обработки метод станет таким:

// 以数组的方式传入
[
  {
    key: 'count',
    val: 'count'
  },
  {
    key: 'add',
    val: 'add'
  }
]

// 以对象的方法传入
[
  {
    key: count,
    val: state => state.count
  },
  {
    key: countAlias,
    val: 'count'
  }
]

mapState

понялnormalizeMapРеализация, а затем оглянуться назадmapStateРеализация метода:

export function mapState (states) {
  const res = {}
  normalizeMap(states).forEach(({ key, val }) => {
    res[key] = function mappedState () {
      return typeof val === 'function'
        ? val.call(this, this.$store.state, this.$store.getters)
        : this.$store.state[val]
    }
  })
  return res
}

Пройдитесь по массиву, возвращаемому сразу после форматирования normalizeMap, и склеивания объекта, который соответствует вычисляемому (требуется возвращаемое значение).

Есть два суждения для val в объекте, возвращаемом normalizeMap в виде массива. Если это не функция, найти ее напрямуюthis.$store.state[val]Состояние возврата. Если это функция, вам нужно использовать вызов, чтобы указать this функции val на экземпляр vue, затем передать состояние и геттеры и, наконец, выполнить функцию val.

функция val

Если val — это функция, это может быть немного сложно понять, например, входящие параметры могут выглядеть так:

computed: mapState({
  countPlusLocalState (state) {
    return state.count + this.localCount
  }
})

проходить черезnormalizeMapОбъект, возвращаемый после метода:

[
  {
    key: 'countPlusLocalState',
    val: function (state) {
      return state.count + this.localCount
    }
  }
]

После прохождения через mapState окончательное возвращаемое значение res равно. Здесь функция val будет выполнена один раз, и будет возвращено возвращаемое значение функции.

{
  countPlusLocalState: function mappedState () {
    return this.$store.state.count + this.localCount
  }
}

На этом интерпретация mapState закончилась. Кроме того, часто используется mapStateоператор спреда в es6, это не реализация vuex, а новая фича es6:

computed: {
  localComputed () { /* ... */ },
  
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

Следует отметить исключение: если вы хотите использовать оператор распространения es6, вам также необходимо ввести пакет babel:babel-plugin-transform-object-rest-spread.

Суммировать

В mapState не так много кода, и основная функция заключается в преобразовании входящего массива или объекта в код, который можно распознать по вычисленным вычислительным свойствам. Что сложнее понять, так это то, что объект с возвращаемым значением функции немного сбивает с толку, поэтому прочитайте его несколько раз, чтобы понять.

Реализация кода в mapState очень лаконичная и изящная.В основном он использует некоторые встроенные функции js для обработки.Я бы на моем месте наверное постоянно писал циклы for.Ха-ха,я получил от этого много знаний. На этом интерпретация vuex подошла к концу.

Категории