如何將 2 arguments 傳遞給 vuex 中的吸氣劑？

Question

因此，不確定這是否是解決此問題的正確方法，但我正在嘗試創建一個 getter，它返回基於通過 function 傳遞給它的 2 colors 的梯度。 到目前為止，我有：

Function 被調用

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

計算：

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

吸氣劑：

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 中處理這種 function 的正確方法？

Answer 1

將 arguments 發送為 object：

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>

Answer 2

調用堆棧錯誤是由這個計算調用本身的遞歸引起的：

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

試試這個：

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

現在計算調用 getter 而不是自己。 請注意，它返回 getter 而不執行它，因為您在模板中調用它時已經這樣做了。

這是一個演示