Как правильно задать начальное состояние компонента из Vuex?

Question

[danilr]

Мне нужно брать данные из Vuex при инициализации компонентов, затем их внутри компонентов менять и затем если требуется обновить их во Vuex.
Простой первый вопрос - если мне нужна начальная структура переменной, правильно ли вот так задавать её во Vuex?

export default new Vuex.Store({
  state: {
    currentNote: {
      id: 1,
      title: '',
      list: [
        {
          isDone: false,
          text: "",
          id: 1
        }
      ]
    }
  },

Второй главный вопрос - если мне надо задать в компоненте начальные данные из Vuex, в моём случае, массив из currentNod, как это правильно сделать?
Я скостылил и применил методо slice(), чтобы он копию мне давал, а то если без slice, то меняя данные в компоненте, он менял их и в store.

export default {
  data() {
    const {currentNote, currentListId} = this.$store.state;

    return {
      title: currentNote.title,
      items: currentNote.list.slice(),
    };
  },

Comments

[Alex]

Зачем вам это нужно? Задавая вопрос, не пишите, что вы пытаетесь сделать. Опишите задачу, которую вы пытаетесь решить, и уже в дополнение описывайте способы которые вы пробовали и чем они вам не подходят.

[Alex]

То что вы сейчас описали, выглядит как нарушение парадигмы Vue. Компонент не должен иметь "копию" данных из хранилища. Он должен "Зависеть" от данных из хранилища, и при их изменении реактивно адаптироваться.

[danilr]

Alex, я пытаюсь сделать приложение "todo list", состоит из двух страниц - главной, где все заметки, и детальной для создания/редактирования.
Почему я копирую данные для компоненты, так это для того, чтобы на каждое изменение инпута в компоненте - не обрабатывать на стороне Vuex. Иначе там будет гора переменных, не нужных для общих нужд.

Answer 1

[Alex]

Почему я копирую данные для компоненты, так это для того, чтобы на каждое изменение инпута в компоненте - не обрабатывать на стороне Vuex

Для таких случаев, существует debounce

Простейший способ рекунривно скопировать объект:

const copy = JSON.parse( JSON.stringify( source ) )

Ну, а сохранять — вызвать action и передать в него вашу копию.