@andrei_pro

Правильны ли такие мутации vuex?

Есть класс:

export default class Product {
    constructor(name) {
        this.name = name
        this.comments = []
    }

    addComment(comment) {
        this.comments.push(comment)
    }

    removeComment(comment) {
        const idx = this.comments.indexOf(comment)

        if (idx !== -1) {
            this.comments.splice(idx, 1)
        }
    }
}

export default class Comment {
    constructor(name) {
        this.name = name
    }
}

Есть хранилище:

const store = new Vuex.Store({
  state: {
    products: []
  },
  mutations: {
    addCommentToProduct(state, {product, comment}) {
        product.addComment(comment)
    },
   actions: {
      addCommentToProduct() {
         const product = new Product('product 1')
         const comment = new Comment('comment 1')
 
         const data = {product, comment}
         commit('addCommentToProduct', data)
      }
   }
  }
});

1. Можно ли в мутации делать так изменения? (вызывать функции класса, а не писать код в мутации)
2. Когда я работаю с классами и вызываю их функции, пример product.addComment(), то после сохранения на сервер всего стейта, мне апи возвращает обычный джсон, который никак не связан с классами и от этого все функции не работают. Мне нужно сделать products.map(product => new Product(product)) и всех вложенных объектов чтобы создать классы из массива? Заюзать orm нет возможности.
  • Вопрос задан
  • 636 просмотров
Пригласить эксперта
Ответы на вопрос 2
@nvdfxx
Senior Pomidor developer
Выглядит весьма странно, в стейте есть products, а в экшенах/мутациях работы с ним нет, или я что-то упускаю? Как у вас в стейт изменения попадают после, например, addCommentToProduct?
Ответ написан
kulakoff
@kulakoff
Vue.js developing
По-моему это породит сложности, особенно в части реактивности стора, которые перевесят преимущества использования класса для модели. Vuex хорошо работает с плоскими объектами и простыми типами данных. В вашем варианте, чтобы все работало без танцев с бубном и отлавливанием багов связанным с тем, что где-то отвалилась реактивность, вам нужно каждый при любом изменении пересоздавать сущность и мержить предыдущее состояние с новым, что будем тем еще гемороем имхо. Плюс такое пересоздание сказывается на производительности в целом, т.к. для полей объекта будут каждый раз создаваться геттеры/сеттеры для обеспечения реактивности. Если объектов много - это начинает сказываться. Вообщем, vue - он мутабелен по своей природе, в этом его преимущество и недостаток одновременно.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы