Nuxt, Vuetify 및 Vuex를 사용하여 글로벌 스낵바를 만드는 방법.

TL;DR

Code here

소개

알림 또는 토스트라고도 하는 스낵바는 모든 애플리케이션에 있습니다. 사용자 상호 작용 후 중요한 정보를 표시하는 데 편리합니다. Vuetify 의 스낵바 구성 요소를 사용하는 경우 함수를 호출하고 스낵바 구성 요소를 표시하는 전역 개체가 없다는 것을 깨달았을 수 있습니다. 나는 Quasar 을 잠시 사용했고 this.$q.notify('Message') 와 사랑에 빠졌습니다. 그래서 Vuetify와 Vuex로 동작을 복제하려고 시도했고 여기서 제가 한 방법을 공유하겠습니다. 이 튜토리얼에서는 Nuxt을 사용하지만 바닐라 Vue 애플리케이션용 코드도 적용할 수 있습니다(Nuxt 없이 스낵바를 구현하는 방법을 보여준 David에게 찬사를 보냅니다: ).

가게

먼저 스낵바를 위한 스토어 모듈을 생성해야 합니다. Vuex를 모른다면 스토어를 변수의 글로벌 저장소로 생각하십시오. Nuxt 및 Vuex에 대한 자세한 내용은 here에서 찾을 수 있습니다.

// ~/store/snackbar.js

export const state = () => ({
  content: '',
  color: ''
})

export const mutations = {
  showMessage (state, payload) {
    state.content = payload.content
    state.color = payload.color
  }
}

우리 매장에는 content 및 color 상태가 있습니다. 이 데이터는 스낵바 구성 요소를 채우는 데 사용됩니다.

상태 데이터를 직접 수정하는 것은 좋은 방법이 아니므로 showMessage 라는 돌연변이를 생성했습니다. 상태 값을 변경하고 변경 사항을 더 쉽게 수신할 수 있습니다.

플러그인

애플리케이션 전체에서 알리미 기능을 사용하려면 플러그인을 만들어야 합니다. 이 플러그인 생성을 건너뛰고 구성 요소에서 this.$store.commit(...) 또는 mapMutation(...)를 사용할 수 있지만 this.$notifier.showMessage(...)가 더 읽기 쉽고 여러 구성 요소에 대한 돌연변이 매핑을 방지합니다.

// ~/plugins/notifier.js

export default ({ app, store }, inject) => {
  inject('notifier', {
    showMessage ({ content = '', color = '' }) {
      store.commit('snackbar/showMessage', { content, color })
    }
  })
}

이 코드는 구성 요소 전체에 $notifier를 삽입합니다. 이 개체에는 showMessage 및 content를 수신하고 스낵바 저장소에 커밋color하는 showMessage 함수가 있습니다. Nuxt 플러그인에 대한 자세한 내용은 here에서 확인할 수 있습니다.

또한 nuxt.config.js에 플러그인을 등록해야 합니다.

export default {
  ...
  plugins: [
    '~/plugins/notifier.js'
  ],
  ...
}

스낵바 구성요소

스낵바 구성 요소는 간단합니다. 화면에 메시지를 표시하는 역할을 합니다.

// ~/components/Snackbar.vue

<template>
  <v-snackbar v-model="show" :color="color">
    {{ message }}
    <v-btn text @click="show = false">Close</v-btn>
  </v-snackbar>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      message: '',
      color: ''
    }
  },

  created () {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'snackbar/showMessage') {
        this.message = state.snackbar.content
        this.color = state.snackbar.color
        this.show = true
      }
    })
  }
}
</script>

구성 요소가 생성되면 변형을 수신 대기하기 시작합니다. 스낵바 정보를 설정하고 스낵바 스토어의 돌연변이showMessage가 호출될 때 표시합니다.

형세

애플리케이션에 스낵바를 추가해야 합니다.

// ~/layouts/default.vue

<template>
  <v-app>
    ...
    <Snackbar></Snackbar>
    ...
  </v-app>
</template>

<script>
import Snackbar from '~/components/Snackbar.vue'

export default {
  components: { Snackbar },
  ...
}
</script>

스낵바 표시

마지막으로 스낵바가 작동 중임을 보여주는 버튼을 만듭니다.

// ~/pages/index.vue

<template>
  ...
  <v-btn color="primary" @click="showSnackbar">
    Show snackbar
  </v-btn>
  ...
</template>

<script>
export default {
  ...
  methods: {
    showSnackbar () {
      this.$notifier.showMessage({ content: 'Hello, snackbar', color: 'info' })
    }
  }
  ...
}
</script>

결론

그게 다야. 그것은 쉽다. 각 상황에 대한 스낵바를 만들지 않고도 어디서나 this.$notifier.showMessage(...)를 호출할 수 있습니다. 다음에 할 수 있는 작업은 한 번에 여러 개의 스낵바를 표시하고 닫기 버튼을 넘어 스낵바에 사용자 지정 작업을 추가하는 것입니다. 하지만 그게 전부입니다. 이 문제를 해결하는 더 좋은 방법을 찾으면 주저하지 말고 의견을 말하십시오.