В предыдущей главе говорилось о связанном содержимом состояния.Если состояние соответствует данным в vue, то геттеры эквивалентны вычисленным в vue.В этой главе мы узнаем больше об атрибуте геттеров vuex.
Vuex предоставляет единое дерево управления состоянием, такое как состояние. Вы можете использовать вычисляемое свойство в vue для получения этих общедоступных состояний для использования. Конечно, вы также можете внести некоторые изменения в это значение на основе исходного значения, например
computed:{
sex:function(){
return this.$store.state.sex + '加个字符串,算是改造'
}
}
Но если ваши другие компоненты также используют этот метод преобразования для преобразования этого значения, вам, возможно, придется скопировать и вставить эту функцию в другие компоненты.Конечно, чтобы решить эту проблему, сам vuex предоставляет аналогичный способ вычисления свойств, геттеры могут разрешить вы можете вывести некоторые новые состояния из состояния хранилища.Конечно, если несколько компонентов не используют это состояние, или производные свойства, используемые каждым подкомпонентом, различны, то вы можете вообще не использовать геттеры.(Скажем немного больше здесь, vuex, кажется, решает проблему связи между компонентами, если ваша операция или данные не включают публичные операции, а только операцию с одним компонентом, пожалуйста, не храните эти значения состояния или функции в vuex, т.к. vuex будет монтировать себя на всех компонентах, вне зависимости от того, использует ли текущий компонент вещи в нем, это фактически увеличит потерю производительности, обратите на это внимание, потому что вам сложно добиться того, чтобы каждый подкомпонент использовал одно и то же одно состояние, если только это не особое состояние, такое как маршрутизация, конечно, маршрутизацией не нужно управлять с помощью vuex, что будет обсуждаться в серии статей о vue-router позже.)
1.getters
Vuex позволяет нам определять «геттеры» (подумайте о вычисляемых свойствах хранилища) в хранилище. Как и вычисляемое свойство, возвращаемое значение метода получения кэшируется в соответствии с его зависимостями и пересчитывается только при изменении его зависимостей. Грубо говоря, это вычисления vue.Если вы разбираетесь в вычислениях, то вы можете использовать геттеры так же, как и вычисления, конечно, есть еще некоторые отличия.
//state.js
let state = {
from: 'china',
arr: [2, 3, 1, 4, 6]
}
export default state
// getters.js
// 第一个参数是state
let address = (state) => {
return '国籍:' + state.from
}
// 第二个参数可以访问getters
let addressMore = (state, getters) => {
return '其他描述' + getters.address
}
// return 一个function,这个function可以传参,当然这个function最后会返回一个具体的数值
//本例中这个方法用于查询state中的arr数组是否存在某个值
let findArr = (state) => (number) => {
let ifExit = state.arr.find((n) => n === number) // arr.find是ES6语法中数组的扩展
if (typeof (ifExit) === 'undefined') {
return false
} else {
return true
}
}
export {address, addressMore, findArr}
Что касается того, как использовать геттеры, вы можете посмотреть комментарии к приведенному выше коду. Здесь я сосредоточусь на разнице между геттерами и вычисляемыми, что является третьим использованием выше. Я буду обсуждать два инструмента обработки данных, вычисленные и фильтры в vue продвинутая серия. Если вы заинтересованы, вы также можете нажать на ссылку ниже:
Вычислены ограничения фильтров двумя инструментами обработки данных
Одним из недостатков вычисляемого является то, что он не может передавать параметры.Если вы хотите определить, существует ли определенное значение в массиве, то вы не можете передать определенное значение в вычисленное.Это на самом деле очень болезненная вещь.Конечно, вы можете через некоторые специальные средства, я не буду расширять это здесь. Если вам интересно, вы можете оставить сообщение. У геттеров нет этой проблемы. Некоторые студенты, которые борются с синтаксисом ES6, могут посмотреть на упрощенную версию ниже, чтобы увидеть, что делает findArr.
let findArr = function(state){
// 返回一个匿名函数
return function(number){
// 如果有相同的则返回n，如果找不到则返回undefined
let ifExit = state.arr.find(function(n){
return n===number
})
if (typeof (ifExit) === 'undefined') {
return false
} else {
return true
}
}
}
Наконец, мы показываем эффект в дочернем компоненте
<template>
<div>
<div>{{from}}</div>
<div>{{from2}}</div>
</div>
</template>
<script>
// import { mapGetters } from 'vuex'
export default {
computed: {
from: function () {
return this.$store.getters.address
},
from2: function () {
return this.$store.getters.addressMore
}
},
created () {
console.log(this.$store.getters.findArr(2))
console.log(this.$store.getters.findArr(7))
}
}
</script>
Результат выглядит следующим образом:
2. Вспомогательная функция mapGetters
Использование использования вспомогательной функции и использование расширения объекта я уже говорил во второй главе этой серии, мне интересно увидеть следующую статью.
Начало работы с Vuex (2) - подробное объяснение состояния, расширения объектов mapState,... mapState
<template>
<div>
<div>{{from}}</div>
<div>{{from2}}</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: mapGetters({
'from': 'address',
'from2': 'addressMore',
'find': 'findArr'
}),
created () {
console.log(this.find(1)) // 由于getters已经通过computed挂载到当前实例,所以你不需要再通过this.$store.getters的方法去访问
console.log(this.$store.getters.findArr(2))
console.log(this.$store.getters.findArr(7))
}
}
</script>
3. ...mapGetters
<template>
<div>
<div>{{from}}</div>
<div>{{from2}}</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
'from': 'address',
'from2': 'addressMore',
'find': 'findArr'
})
},
created () {
console.log(this.find(1)) // 由于getters已经通过computed挂载到当前实例,所以你不需要再通过this.$store.getters的方法去访问
console.log(this.$store.getters.findArr(2))
console.log(this.$store.getters.findArr(7))
}
}
</script>
Наконец, я хочу сказать, что во многих случаях вам не нужны геттеры. Пожалуйста, используйте их по мере необходимости. Не используйте геттеры для управления всеми производными состояниями состояния. Если есть несколько подкомпонентов или подстраниц для использовать, рассмотрите возможность использования геттеров.
Не забывайте о первоначальном намерении, Фанг Дэ всегда
Дети, которым нравятся блогеры, могут отсканировать QR-код, чтобы добавить блогеров в друзья~ Вы также можете отсканировать средний QR-код, чтобы присоединиться к фан-группе блоггера (708637831)~ Конечно, вы также можете отсканировать QR-код, чтобы вознаградить и напрямую поддержать красивого блоггера. , штук.