Nuxt отправить данные между 2 компонентами - PullRequest
Новая
       79

Nuxt отправить данные между 2 компонентами

0 голосов
/ 27 февраля 2019

добро пожаловать в эту тему.Недавно я пытался использовать платформу Nuxt для создания своего веб-приложения, но столкнулся с проблемой.

В макете по умолчанию у меня есть два компонента.компонент заголовка и компонент боковой панели.если я нажимаю на значок гамбургера в компоненте заголовка, боковая панель должна уменьшаться или увеличиваться в зависимости от состояния значка гамбургера (true или false)

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

, поэтому код, который у меня сейчас есть, выглядит следующим образом:

это страница индекса

это компонент заголовка

это компонент боковой панели

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

. Единственное, что ВАЖНО , - это то, что оно должно быть как можно более простым, чтобы люди, которые будут использовать этот шаблон позжене нужно добавлять ненужную работу

какие-либо возможности это может работать?

1 Ответ

0 голосов
/ 27 февраля 2019

Самый простой способ получить глобальную переменную - это установить ее как элемент состояния и иметь мутацию для ее изменения.Поскольку ваш 'hambuger' является логическим значением, нет необходимости передавать параметры в мутацию, что делает все это проще.

Возможно, вы захотите иметь именованный модуль в вашем магазине, чтобы справиться с этим, но я просто покажу его в store / index.js. 

export const state = () => ({
  hamburger: true
})

export const mutations = {
  changeHamburger (state) {
    state.hamburger = !state.hamburger
  }
}

Затем на любой странице иликомпонент, к которому вы можете обратиться:', например <v-btn @click="hamburgerChange">.

...