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

Question

[andrei_pro]

Есть класс:

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 нет возможности.

Comments

[alex]

а зачем вам этот класс?

[andrei_pro]

Alex, привык из бекенда моделями управлять, да и очень наглядно когда все в моделях, а то у меня их десяток и даже разбитие по namespaced и все getters, actions в разных файлах не очень выручают, кода куча. И в классах использую геттеры для получения связей вида: get getComments() { store.getters.getCommentsByProductId(this.id) }

[alex]

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

Answer 1

[nvdfxx]

Выглядит весьма странно, в стейте есть products, а в экшенах/мутациях работы с ним нет, или я что-то упускаю? Как у вас в стейт изменения попадают после, например, addCommentToProduct?

Comments

[andrei_pro]

Все мутации я не писал. Там есть: addProduct - const product = new Product(), this.products.push(product)

[nvdfxx]

andrei_pro, ну, у вас addCommentToProduct сработал, как после этого изменения в сторе отобразятся?

[andrei_pro]

nvdfxx, работает. Но не уверен верно ли так делать чтобы потом все переписывать не пришлось и 2й пункт тоже работает с map, но тот же вопрос у меня структура 10 уровней вложенности и их все через map прогнать нужно

Answer 2

[Evgeny Kulakov]

По-моему это породит сложности, особенно в части реактивности стора, которые перевесят преимущества использования класса для модели. Vuex хорошо работает с плоскими объектами и простыми типами данных. В вашем варианте, чтобы все работало без танцев с бубном и отлавливанием багов связанным с тем, что где-то отвалилась реактивность, вам нужно каждый при любом изменении пересоздавать сущность и мержить предыдущее состояние с новым, что будем тем еще гемороем имхо. Плюс такое пересоздание сказывается на производительности в целом, т.к. для полей объекта будут каждый раз создаваться геттеры/сеттеры для обеспечения реактивности. Если объектов много - это начинает сказываться. Вообщем, vue - он мутабелен по своей природе, в этом его преимущество и недостаток одновременно.