Что означают три точки впереди функции во vue шаблоне?

Question

[sergeyviktorovich]

import { mapActions, mapGetters } from 'vuex';

export default {
    name: 'ViewDataList',
    props: {
        status: String,
    },
    computed: {
        ...mapGetters(['dataList', 'currentItem'])
    },
    methods: {
        ...mapActions(['loadData', 'setCurrentItem', 'moveBack', 'loadDataItemInfo', 'resetQuery']),

        selectItem(event) {
            const id = event.target.dataset.id;
            this.setCurrentItem(id);

            if (this.status == 'modal') {
                this.loadDataItemInfo();
            }
        },

        resetItem() {
            this.resetQuery();
        },

        nextStep() {
            this.$emit('nextStep');
        }
    },
    created() {
        this.loadData();
    },
}

Answer 1

[0xD34F]

Это означает, что вы не знаете js.

Да и в целом - плохо понимаете смысл используемых вами слов. Какой шаблон, вы чего? Шаблон vue - это html, который компилируется в render-функцию. А вы что показали?

Comments

[sergeyviktorovich]

0xD34F ,объясните ,не понял про html и почему в теге скрип пишут код во файле с расширением vue ?
не увидел по ссылки примера с ...mapGetters(['dataList', 'currentItem']) с вызовом функции с троеточьем

[0xD34F]

sergeyviktorovich, все эти вопросы от нечтения документации. Пересказывать которую я вам конечно же не буду.

[sergeyviktorovich]

0xD34F, это ответ не по вопросу ,прошу не высказывать ваше ваши мысли не касаемо ответа

[0xD34F]

sergeyviktorovich, ответ по вопросу я уже вам дал - ссылку вы видели. Дальше всё зависит от вас. Читайте, думайте.

Answer 2

[Роман Сарваров]

mapActions и mapGetters (а ещё часто бывает mapState и mapMutations) - это методы Vuex, которые позволяют обращаться к функционалу хранилища vuex в контексте текущего компонента. По сути только делает код более красивым.

Например, в вашем примере есть loadData в mapActions. В таком случае можно обратиться просто this.loadData();

Если без этого, то пришлось бы писать такой длинный и некрасивый код: this.$store.dispatch('loadData');

Читайте документацию по Vuex.

Comments

[sergeyviktorovich]

я видел был приведен пример ,что можно обойтись так без него , одно и тоже ли это?
вариант с spred оператором
и почему тут без this.$store.dispatc ?

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getStrings', 'getNumbers', 'getUsers']),
    anotherCounter() {
      // ..
    }
  }
}

и без него

import { mapGetters } from 'vuex';

export default {
  computed: {
    getStrings() {
      // ..
    },
    getNumbers() {
      // ..
    },
    getUsers() {
      // ..
    },
    anotherCounter() {
      // ..
    }
  }
}

почему anotherCounter нельзя добавить в массив в верхнем примере?
Если бы ...я не использовал, я бы anotherCounter()не смог определить дополнительно. ...Поскольку вставка была выполнена, как указано выше, можно было определить дополнительные функции вычисляемых свойств.

[Роман Сарваров]

sergeyviktorovich, потому что не до конца понимаете что это за методы.
anotherCounter - это вычисляемое свойство компонента, getStrings, getNumbers и getUsers это вычисляемые свойства Vuex (глобального состояния приложения).