Как изменить переменную в родительском компоненте если в дочернем нет переменной?

Question

[ssvwvhas]

Добрый вечер. Создаю одностраничное приложение
В родительском компоненте допустим есть переменная, которая показывает кнопку.
buttonShow = false;
Эта кнопка нужна только на нескольких страницах. Если установить в дочернем элементе:
this.$parent.buttonShow = true; то кнопка останется активной всегда, можно ли сделать так чтобы переменная была равна false всегда, и только на определенных компонентах вставлять true. Или же придется на всех остальных компонентах писать this.$parent.buttonShow = false;

Comments

[Сергей Сергей]

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

Answer 1

[askhat]

Вы не должны напрямую модифицировать состояние родительского компонента, это противоречит архитектуре однонаправленного потока данных. Вместо этого вы должны воспользоваться одной из следующих опций:

1. Отправка события

// parent.vue
<template>
  <parent>
    <child @toggle-button="toggleButtonHandler"/>
  </parend>
</template>
<script>
export default {
  data: {
    return {
      buttonShow: false
    }
  },
  methods: {
    toggleButtonHandler () {
      this.buttonShow = !this.buttonShow
    }
  }
}
</script>

// child.vue
<template>
  <button @click="clickHandler">Hide Button</button>
</template>
<script>
export default {
  methods: {
    clickHandler () {
      this.$emit('toggle-button')
    }
  }
}
</script>

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

2. Воспользоваться стором

// store.js
export default {
  state: {
    buttonShow: false
  },
  mutations: {
    buttonToggle: state => (state.buttonShow = !state.buttonShow)
  }
}

Механика работы в компопненте почти такая же, за тем исключением что обработчик клика в дочернем компоненте должен коммитить мутацию:

clickHandler () {
  this.$store.commit('buttonToggle')
}

А родительский компненте, в свою очередь, избаваляется от подписки на @toggle-button и больше не держит собственный стейт, а подписывается на стор:

computed: {
  buttonShow () {
    return this.$store.state.buttonShow
  }
}

Comments

[koganaleksey]

Спасибо за ответ! Очень помог.