Действие Vuex не распознается как функция внутри данных компонента ()

Question

У меня проблема с запуском метода в компоненте vue. Я использую пользовательский интерфейс Element с Vuex и хотел бы вызвать изменение состояния (сделать другой компонент видимым) при нажатии на ярлык в элементе datetimepicker. Вот код компонента:

<template>
    <div id="DateTimePicker">
        <div/>
        TimeInterval state: {{this.$store.getters.timeInterval}}
        <div/>
        <el-date-picker
            :value="this.timeInterval"
            @input="this.setTimeInterval"
            type="datetimerange"
            :picker-options="dateTimeShortcuts"
            range-separator="To"
            format="yyyy-MM-dd HH:mm"
            editable
            time-arrow-control
            start-placeholder="Start date"
            end-placeholder="End date"
            align="right"
            size="large">
        </el-date-picker>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
    name: 'DateTimePicker',
    computed: {
        ...mapGetters(['timeInterval']),
    },
    methods: {
        ...mapActions(['setTimeInterval', 'setRefreshRateVisibility']),
    },
    data() {
        return {
            dateTimeShortcuts: {
                disabledDate(date) {
                    return date > new Date() || date < new Date('12/1/18');
                },
                shortcuts: [
                    {
                        text: '15 Minutes',
                        onClick(picker) {
                            this.setRefreshRateVisibility(true); // Vue does not recognize this as a function
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 900 * 1000);
                            picker.$emit('pick', [start, end]);
                        },
                    },
                ],
            },
        };
    },
};
</script>

Когда я нажимаю на ярлык - я получаю сообщение об ошибке:

Uncaught TypeError: this.setRefreshRateVisibility is not a function

Когда я делаю

<div id="DateTimePicker" @click="this.setRefreshRateVisibility(true)">

работает нормально, поэтому проблема не в самом действии, а в том, как я вызываю это действие, я думаю. Вот файл магазина:

export default {
    state: {
        isRefreshRateVisible: false,
    },
    mutations: {
        SET_VISIBILITY(state, newValue) {
            state.isRefreshRateVisible = newValue;
        },
    },
    actions: {
        setRefreshRateVisibility: ({ commit }, newValue) => {
            commit('SET_VISIBILITY', newValue);
        },
    },
    getters: {
        isRefreshRateVisible: state => state.isRefreshRateVisible,
    },
};

Кто-нибудь может мне помочь разрешить это, пожалуйста?

Answer 1

Возможно, вы неправильно указали this.В контексте JavaScript this относится к непосредственному контексту, но функции Vue связаны с контекстом класса / компонента.

Чтобы предотвратить это, скопируйте ссылку на эту переменную в другую.

data(){
   let componentObj = this;
   ...

И затем вызовите метод, используя эту ссылку.

onClick(picker) {
    componentObj.setRefreshRateVisibility(true);