Метод класса

@DEMONSTR · Регистрация: 07.03.2013

Author24 — интернет-сервис помощи студентам

Всем привет! Столкнулся со следующей проблемой:
Есть класс, с методом addTodo

Javascript

export default class Note extends Object {
  constructor(options) {
    if (!options) options = {}
 
    super(options)
    this.title = options.title || ""
    this.todos = options.todos || []
    this.id = options.id || v4()
  }
 
  addTodo(text) {
    console.log(`Added todo "${text}" in note with id ${this.id}`)
    this.todos.push({id: v4(), done:false, text})
  }
}

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

Javascript

1
2
3

const note = this.$store.getters.getNoteById(id)
this.base = note
this.current = new Note(note)

Но столкнулсяс проблемой, что при вызове

Javascript

1	this.current.addTodo("todo")

todo добавляется как в this.current, так и в this.base и в стор. Не очень хорошо понимаю передачу объектов по ссылкам, но здесь как минимум у current должен создаваться новый объект, разве нет?

Понимаю, что ошибка вероятно глупая и я чего то не понимаю. Прошу хотя бы направить на путь)

Всем Спасибо!

@MrOnlineCoder · 04.07.2020, 15:08

Сообщение от DEMONSTR

extends Object {

Скажите, а зачем вам наследование от Object?

Сообщение от DEMONSTR

const note = this.$store.getters.getNoteById(id)
this.base = note
this.current = new Note(note)
Но столкнулсяс проблемой, что при вызове
Javascript

Не очень понимаю зачем вам дополнительная абстракция в виде класса. Насколько я знаю, в Vuex лучше всегда хранить только примитивные типы данных и объекты из них, поскольку они и есть "сырым" stateом вашего приложения. Mutations и есть для того чтобы этими данными управлять. Почему бы вам не сделать просто в Vuex:

Javascript

state: {
 todos: []
},
mutations: {
  addTodo(state, payload) {
     state.todos.push(payload);
   }
}

и обойтись без класса

@DEMONSTR · 04.07.2020, 15:30 **[ТС]**

MrOnlineCoder, Идея была в том, что есть некий объект note, у которого должны быть todos. Собственно самих note может быть много, отсюда и родилась идея сделать класс с базовыми методами, добавления, удаления todo. Да и при увеличении функциональности, мне показалось, что будет классно иметь просто класс Note в котором можно добавлять методы. Наследовался от Object, что бы не прописывать set, get вручную.

@MrOnlineCoder · 04.07.2020, 15:57

DEMONSTR, понимаю Вашу идею, однако Vuex не так работает, по двум причинам:
1. Не факт что Vue сможет сделать реактивными все данные вашего класса.
2. Получается, что у вас происходит изменения состояния класса в методе класса, и вы фактически меняете состояние приложения, а это неверно - состояние должно меняться только через Vuex мутации.

Т.е. опять таки, я бы лично хранил у Vuex только данные в виде объектов и примитивных значений.

У вас есть серверная часть? Обычно такие задачи решаются путем one-to-many отношения: у вас есть таблица в БД notes, где каждая запись имеет note_id. Дальше каждая todo в todos тоже имеют note_id, указывая, к какому note они принадлежат. А когда вы будете грузить данные с сервера, то вы всегда будете получать только данные, без реализации и классов. И тогда вам нужно эти данные записать в стейт.

К пример вы можете сделать

Javascript

state: {
  notes: [],
  todos: []
}

И:

Javascript

getters: {
  getTodosForNote(state) {
    return (note_id) => state.todos.filter(todo => todo.note_id === note_id);
   }
}

@DEMONSTR · 04.07.2020, 17:11 **[ТС]**

MrOnlineCoder, Спасибо, что уделили внимание) мысль уловил, спасибо!

Добавлено через 57 минут
MrOnlineCoder, Дружище, спасибо тебе огромное! то с чем я возился несколько дней, оказалось плевым делом, главное идти правильной дорогой! Можешь посоветовать какие то материалы, которые помогают определять подходы к проектированию тех или иных вещей?

@MrOnlineCoder · 04.07.2020, 17:44

Сообщение от DEMONSTR

посоветовать какие то материалы, которые помогают определять подходы к проектированию тех или иных вещей?

Думаю, начать можно с официальной документации: https://vuex.vuejs.org/ru/guide/

Сообщение от DEMONSTR

которые помогают определять подходы к проектированию тех или иных вещей?

Тут к сожалению прямых ссылок дать не могу. Могу предложить погуглить примеры или еще лучше "real-life" примеры разных приложений. Еще вариант - практикуйтесь!

@DEMONSTR · 04.07.2020, 18:56 **[ТС]**

MrOnlineCoder, Спасибо)

@DEMONSTR 8 / 8 / 2 Регистрация: 07.03.2013 Сообщений: 85
	04.07.2020, 15:30 [ТС]	3
	MrOnlineCoder, Идея была в том, что есть некий объект note, у которого должны быть todos. Собственно самих note может быть много, отсюда и родилась идея сделать класс с базовыми методами, добавления, удаления todo. Да и при увеличении функциональности, мне показалось, что будет классно иметь просто класс Note в котором можно добавлять методы. Наследовался от Object, что бы не прописывать set, get вручную. 0

@DEMONSTR 8 / 8 / 2 Регистрация: 07.03.2013 Сообщений: 85
	04.07.2020, 17:11 [ТС]	5
	MrOnlineCoder, Спасибо, что уделили внимание) мысль уловил, спасибо! Добавлено через 57 минут MrOnlineCoder, Дружище, спасибо тебе огромное! то с чем я возился несколько дней, оказалось плевым делом, главное идти правильной дорогой! Можешь посоветовать какие то материалы, которые помогают определять подходы к проектированию тех или иных вещей? 0

@MrOnlineCoder Всегда онлайн 1084 / 788 / 295 Регистрация: 07.04.2013 Сообщений: 2,703
	04.07.2020, 17:44	6
	Сообщение от DEMONSTR посоветовать какие то материалы, которые помогают определять подходы к проектированию тех или иных вещей? Думаю, начать можно с официальной документации: https://vuex.vuejs.org/ru/guide/ Сообщение от DEMONSTR которые помогают определять подходы к проектированию тех или иных вещей? Тут к сожалению прямых ссылок дать не могу. Могу предложить погуглить примеры или еще лучше "real-life" примеры разных приложений. Еще вариант - практикуйтесь! 1

@DEMONSTR 8 / 8 / 2 Регистрация: 07.03.2013 Сообщений: 85
	04.07.2020, 18:56 [ТС]	7
	MrOnlineCoder, Спасибо) 0

Опции темы

Метод класса

Решение