Вычисляемые свойства объектов массива состояний Vuex

Question

Этот вопрос также может быть применим к Vue в целом, но я использую Vuex для своего проекта.

В моем магазине есть массив объектов, для которых я хотел бы иметь вычисляемое свойство.

Для упрощения предположим, что мое хранилище выглядит следующим образом:

const state = {
    numbers = [
        {num: 2, multiplier: 3},
        {num: 5, multiplier: 10},
        {num: 1, multiplier: 6}
    ]
};

Теперь я хочу вычисляемое свойство для каждого объекта массива чисел, так что результатом будет множитель num * (например,2 * 3 = 6, 5 * 10 = 50)

Одним из решений является создание вычисляемого свойства, которое возвращает массив чисел плюс вычисленное поле ... например:

const getterrs = {
    num_list(state){
        const list = state.numbers
        list.map(n=>{
            n.value=n.num*n.multiplier;
        );
        return list;
    }
}

Это работает, но у него есть пара проблем:

• Возвращенный массив не может быть связан с v-моделью для невычисляемых полей

• Весь массив будет пересчитываться всякий раз, когда изменяется какой-либо элемент в массиве ... Я хочу пересчитать только отдельный измененный элемент.

Возможно ли это с Vue / Vuex?

Answer 1

Вы можете выполнять любые вычисления данных вашего магазина в компоненте, в котором он используется. Я бы попросил вашего получателя просто вернуть массив чисел:

const getters = {
    num_list(state){
        return state.numbers;
    }
}

Тогда в вашем компоненте вы можете получить доступ к номерам с помощьюдобытчик и используй его как хочешьПоэтому, если вы хотите отобразить исходный массив, вы можете получить его следующим образом:

computed: {
        num_list() {
            return this.$store.getters.num_list
        }
    }

и отобразить его в своем шаблоне следующим образом:

<p>Our first number is {{num_list[0].num}} and it's multiplier is {{num_list[0].num}}</p>

Если вы хотите иметь умножениеВы также можете вычислить другое вычисляемое свойство:

multiplied() {
    return this.num_list[0].num*this.num_list[0].multiplier
}

и отобразить его в шаблоне с помощью {{multiplied}}.

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

multipliedMethod(index) {
    return this.num_list[index].num*this.num_list[index].multiplier
}

Или, если вы хотите показать все результаты, вы можете перебирать свой num_list с помощью v-for и выполнять любые вычисления на лету:

<div v-for="(num, index) in num_list" :key="index">
  <p>{{num.num*num.multiplier}}</p>
</div>