Как передать 2 аргумента получателю в vuex? - PullRequest
Новая
       4

Как передать 2 аргумента получателю в vuex?

0 голосов
/ 09 апреля 2020

Итак, я не уверен, что это правильный путь, но я пытаюсь создать метод получения, который возвращает градиент, основанный на 2 цветах, переданных ему через функцию. Пока у меня есть:

Функция вызывается 

<v-card-text
        style="height: 120px"
        :style="{
            'background-image': backgroundImage(card.color1, card.color2),
        }"
        flat
    ></v-card-text>

вычислено: 

backgroundImage() {
            return this.backgroundImage(color1, color2)
        },

getter: 

getters: {
        backgroundImage: () => (color1, color2) =>{
            let bgImage =
                'linear-gradient(to top right, ' + color1 + ',' + color2 + ')';
            return bgImage;
        }

    }

Но когда я ее запускаю теперь я получаю эту ошибку 

Error in render: "RangeError: Maximum call stack size exceeded"

Не уверен, что я сделал неправильно или это правильный способ обработки такого рода функций в Vuex?

Ответы [ 2 ]

1 голос
/ 09 апреля 2020

Ошибка стека вызовов вызвана рекурсией самого этого вычисленного вызова: 

backgroundImage() {
  return this.backgroundImage(color1, color2) // <-- calling itself recursively
}

Попробуйте вместо этого: 

backgroundImage() {
  return this.$store.getters.backgroundImage;
}

Теперь вычисляемый вызывает получатель вместо себя. Обратите внимание, что он возвращает геттер без его выполнения, потому что вы делаете это уже при вызове его в шаблоне.

Вот демо

1 голос
/ 09 апреля 2020

Отправьте аргументы как объект: 

bgImg() {
  return this.backgroundImage({color1: color1, color2: color2})
  return this.backgroundImage({color1, color2}) // or shortcut
}

Запустите ваше действие (не в методах получения) 

backgroundImage(payload) => {
  const {color1, color2} = payload
  return 'linear-gradient(to top right, ' + color1 + ',' + color2 + ')';
}

или ярлык 

backgroundImage({color1, color2}) => {
  return `linear-gradient(to top right, ${color1}, ${color2})`;
}

На самом деле это правильная настройка: 

export default {
  state: {
    backgroundImage: {},
  },

  mutations: {
    SET_BG_IMG(state, payload) {
      state.backgroundImage = payload;
    },
  },

  actions: {
    setBgImg({ commit }, payload) {
      const {color1, color2} = payload
      const myImg = `linear-gradient(to top right, ${color1}, ${color2})`;
      commit('SET_BG_IMG', myImg);
    },
  },

  getters: {
    backgroundImage: (state) => state.backgroundImage,
  },
};

На ваш взгляд: 

<template>
  <div>{{ backgroundImage }}</div>
</template>

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

export default {
  name: 'YourComp',
  computed: {
    ...mapGetters(['backgroundImage']),
  },
  mounted() {
    this.setBgImg(lang);
  },
  methods: {
    ...mapActions(['setBgImg'])
  },
};
</script>
...