다음으로 두 구성 요소 간에 데이터 전송

다음으로 두 구성 요소 간에 데이터 전송

이 주제에 오신 것을 환영합니다.최근에 Nuxt 프레임워크를 사용하여 웹 애플리케이션을 만들려고 했지만 문제에 부딪혔습니다.

기본 레이아웃에는 머리글 구성 요소와 사이드바 구성 요소의 두 가지 구성 요소가 있습니다. 머리글 구성 요소에서 햄버거 아이콘을 클릭하면 사이드바가 햄버거 아이콘 상태(참 또는 거짓)에 따라 더 작아지거나 커져야 합니다.

그래서 더 복잡하게 만들기 위해 다른 구성 요소를 통해 보내기 위해 소품을 사용하고 싶지 않습니다. 사람들이 쉽게 사용할 수 있도록 템플릿으로 만들고 싶습니다. 로컬 구성 요소 변수를 다른 구성 요소가 사용할 수 있는 글로벌 변수로 변환할 수 있습니까?

그래서 제가 지금 가지고 있는 코드는 다음과 같습니다.

이것은 색인 페이지입니다.

이것은 헤더 구성요소입니다.

사이드바 구성요소입니다.

헤더 구성 요소 페이지에서 햄버거 상태를 트리거하는 것을 볼 수 있습니다.사이드바 구성 요소의 상태에 액세스하여 사이드바를 조정할 수 있습니다.

한 가지 중요한 것은 나중에 이 템플릿을 사용하는 사람들이 불필요한 작업을 추가할 필요가 없도록 최대한 단순해야 한다는 것입니다.

이것이 작동할 수 있는 가능성은 없습니까?

전역 변수를 얻는 가장 간단한 방법은 상태 요소로 설정하고 이를 변경하기 위한 돌연변이를 갖는 것입니다.당신의 '햄버거'는 부울이기 때문에 변환에 매개 변수를 전달할 필요가 없기 때문에 그것을 더욱 쉽게 할 수 있습니다.

이 문제를 처리하기 위해 이름이 지정된 모듈을 스토어에 두고 싶을 수도 있지만, 일단은 store/index.js에 넣겠습니다.

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

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

그런 다음 페이지 또는 구성 요소에서 해당 상태 요소에 액세스할 수 있습니다.

요소.가치관

<script>
import { mapMutations } from 'vuex'

export default {
  computed: {
    hamburger () {
      return this.$store.state.hamburger
    }
  },
  methods: {
    ...mapMutations({
      hamburgerChange: 'changeHamburger'
    })
  }
}
</script>

따라서 이제 구성 요소에서 계산된 속성 '햄버거'를 사용할 수 있으며 '햄버거 변경'을 호출하여 변경할 수 있습니다.<v-btn @click="hamburgerChange">.

언급URL : https://stackoverflow.com/questions/54894960/nuxt-send-data-between-2-components