Блог

Главная - Вопросы по программированию - Реактивный или вычисленный для массива

Реактивный или вычисленный для массива

#vue.js #vuex #vuejs3 #vuex4

Вопрос:

Интересно, правильно ли я это делаю? Используя Vue3 и Vuex4.

У меня list в магазине есть массив с именем, который выглядит так:

   const store = createStore({
    plugins: [createPersistedState()],
    state() {
      return {
        list: [{
            name:  makeid(7),
            id: makeid(5),
            group: {
                head: false,
                inGroup: 0,
                pos: 0.0
            }
        }]
}

Для добавления/удаления элементов я использую мутации с последующей сортировкой массива.
В моем компоненте я получаю массив следующим образом:

let list = reactive(store.getters.getList);

Действия называются так:

 store.dispatch('pushElement', el)
store.dispatch('removeElement', id)

Массив обновляется, как и ожидалось, при использовании reactive . Но мне интересно, предпочтительнее ли использовать computed property для списка вместо реактивного массива? Я уже пробовал это с

 list = computed () => {get()..., set()...}

Но возникли проблемы с удалением элемента из массива.

Итак, я делаю это прямо здесь?

Редактировать:

Как и предполагалось, я сейчас использую вычисляемое свойство для аспекта только для чтения, например:

         let list = computed({
            get: () => {
                return store.getters.getList;
            }
        });

Комментарии:

1. Если я правильно понял дело, то и то, и другое неверно. Предполагается, что состояние Vuex является единственным источником истины. list в компоненте должен быть доступен только для чтения, т. е. вычисляется без set .

2. @EstusFlask, ЗНАЧИТ, я должен полностью поместить маниуляцию в магазин? Но разве это не то, что я только что сделал с двумя dispatch для добавления и удаления элемента? Также list в компоненте просто установлено значение a getter из магазина.

3. ЗНАЧИТ, я должен полностью перенести мануальную терапию в магазин? — да, это цель абстракции Vuex, в противном случае вы могли бы просто сделать reactive объект доступным глобально для всех компонентов и напрямую изменить его. Так что да, использование вычисленного без set -это то, как это можно увидеть во всех примерах Vuex.

4. @EstusFlask Спасибо за объяснение. Если вы напишете ответ, я могу его принять. 🙂

Ответ №1:

Правильный способ справиться с этим-использовать вычисляемое свойство вообще без задатчика. Таким образом, обработка данных хранится в хранилище:

         let list = computed({
            get: () => {
                return store.getters.getList;
            }
        });
Метки: