Как вызвать перерисовку компонента при изменении во VueX?

Question

[SherbakovFirst]

Всем привет. Решил делить всё по компонентам и меня волнует некоторые проблемы. Я подитожу потом, но сначала расскажу и покажу код

Задача простая. Есть инпут, есть вывод таксков. При клике на кнопку я могу поменять значение таски.
Есть компонент(модуль, как более правильнее) ввода и отправки новой такси, а есть компонент отрисовки этих тасок

Когда я нажимаю отправить новую таску, то я делаю следующее

В самом компоненте
addNewTaskInState(){
               this.$store.commit('addNewTask', this.taskValue)
}
Во VueX
  addNewTask (state, task){
      let localTask = {
        id: this.getters.validID, // Эта функция помогает найти свободный ID. Не забивайте голову
        taskValue: task
      }
      state.tasks.unshift(localTask)

Но компонент, который отрисовывает таски, не понимает, что там произошли изменения, ведь он только принимает данные из VueX и делает их копию, для отрисовки. Кстати я не уверен что я делаю это правильно

mounted: function(){
          this.localTasksList = [...this.$store.state.tasks]
          this.localTasksList.map(e => e.isEdit = false) // Это я добавляю к каждому элементу сигнал для редактирования
 }

Как сделать так, чтобы 2 компонент отслеживал изменения, но при этом я мог с ними работать и менять данные. Ведь таски я должен редактировать.

И правильно ли я делаю, что копирую массив во VueX

Answer 1

[SymphoGraph]

Как сделать так, чтобы 2 компонент отслеживал изменения, но при этом я мог с ними работать и менять данные.

Для данного случая достаточно, чтобы оба компонента имели общего родителя и использовать синтаксис <script setup>

Из родителя вы можете передать TaskList либо через prop либо через provide/inject и делать с ним всё что нужно, не потеряв реактивность.

//родитель
const TaskList = ref([])
provide('TaskList',  TaskList)

//потомок
const TaskList = inject('TaskList')

ЗЫ

The official state management library for Vue has changed to Pinia.

https://vuex.vuejs.org/

Comments

[SherbakovFirst]

Добрый вечер Роман. Спасибо за новую информацию.
Но Ваше решение оно помогает мне объединить 2 компонента одними данными.
Это сработало бы, если моя логика не была завязана на VueX.
Но мне же нужно использовать VueX как источник правды. Ведь при добавлении новой таски она должна сохраняться, при измении таски она так же должна сохраняться.

Если я не правильно понял Ваш ответ, то буду благодарен, если поправите

[SymphoGraph]

SherbakovFirst, мы же в контексте vue3? Не vue2? Если да, то она сохранится.
Если вы измените TaskList в дочернем компоненте (удалите/добавите элемент), он удалится/добавится и в родительском.
Даже если вы сделаете v-for (Task in TaskList) :TaskItem ="Task" и измените какое-нибудь свойство TaskItem, это также изменится и в родительском TaskList.
Причем потомок не обязательно должен быть дочерним, он может быть и внуком и правнуком.
Главное, чтобы родительский объект был в ref().
Так же может стать неожиданным, что в теле скрипта обращаться к нему следует TaskList.value

[SymphoGraph]

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

Answer 2

[SherbakovFirst]

Спасибо всем кто отвечал.
Решил проблему с помощью
computed: {
...mapState(['tasks'])
},

watch: {
tasks:{
handler(){
this.updateTasksList()
localStorage.setItem('localTasksList', JSON.stringify(this.localTasksList))
},deep: true
}
}