Vue : Flash Messages

Flash Messages

Cover a common web app notification feature, and utilize some features of Vue 3 to create global storage.

일반적인 웹 앱 알림 기능을 다루고 Vue 3의 일부 기능을 활용하여 전역 저장소를 만듭니다.

 

Problem: Delivering a Temporary Message

It might be nice to have a flash message, after a user registers for an event, letting them know they’re registered as we deliver them back to the event page:

사용자가 이벤트에 등록한 후 이벤트 페이지로 다시 전달할 때 등록되었음을 알리는 플래시 메시지를 사용하는 것이 좋을 수 있습니다.

 

/src/views/event/Register.vue

Before we push our navigation back to the event details page, we’d like to set a flash message to appear on that page communicating that the user is successfully registered. 

이벤트 세부정보 페이지로 다시 이동하기 전에 사용자가 성공적으로 등록되었음을 알리는 플래시 메시지가 해당 페이지에 표시되도록 설정하고 싶습니다.

<template>
  <p>Regstration form here</p>
  <button @click="register">Register Me!</button>
</template>
<script>
export default {
  props: ['event'],
  methods: {
    register() {
      // Assuming successful API call to register them

      // Set a flash message to appear on the next page loaded which says
      // 'You are successfully registered for ' + this.event.title

      this.$router.push({
        name: 'EventDetails',
        params: { id: this.event.id }
      })
    }
  }
}
</script>

 

Solution: Global Storage & Provide / Inject

three steps with my solution

1. Create a global storage mechanism to store our flash message.
2. 플래시 메시지를 저장할 전역 저장 메커니즘을 만듭니다.
3. Set the flash message for registration inside our Register.vue.
4. Register.vue 내에서 등록을 위한 플래시 메시지를 설정하세요.
5. Create a place where the flash message is displayed in our App.vue.
6. App.vue에 플래시 메시지가 표시되는 장소를 만듭니다.

Step 1: Global Storage

Vue 3 decoupled reactivity from components. This allows us to declare a reactive object independent of our components, and then inject that reactive object to the components who need it.

Vue 3는 components에서 반응성을 분리했습니다. 이를 통해 components와 독립적인 반응형 개체를 선언한 다음 해당 반응형 개체를 필요한 components에 주입할 수 있습니다.

 

/src/main.js

Be sure to read the comments in the code below.

Provide has been around since Vue 2, and it allows us to specify data that we want inject into other components. You can think of it as an alternative to using props and events for component communication.

Provide는 Vue 2부터 사용되었으며 이를 통해 다른 구성 요소에 주입하려는 데이터를 지정할 수 있습니다. 컴포넌트 통신을 위해 props와 이벤트를 사용하는 것에 대한 대안으로 생각할 수 있습니다.

 

import { createApp, reactive } from 'vue'  // <--- importing reactive
import App from './App.vue'
import router from './router'
import store from './store'

// Create a reactive object
const GStore = reactive({ flashMessage: '' })

createApp(App)
  .use(store)
  .use(router)
  .provide('GStore', GStore)  // provide this object so others can inject it
  .mount('#app')

 

Step 2: Create the Flash Message

inject our GStore and use it to store our flashMessage:

GStore를 삽입하고 이를 사용하여 flashMessage를 저장합니다.

 

/src/views/event/Register.vue

First the inject component option, which gives our component access to our GStore. Then we set our flash message, and set a Timeout so that the flashMessage is cleared after 3 seconds.

먼저 GStore에 대한 component 액세스를 제공하는 inject component 옵션을 사용합니다. 그런 다음 플래시 메시지를 설정하고 3초 후에 flashMessage가 지워지도록 Timeout을 설정합니다.

<script>
export default {
  props: ['event'],
  inject: ['GStore'], // <---- Inject the Global Store
  methods: {
    register() {
      // Assuming successful API call to register them

      this.GStore.flashMessage =
        'You are successfully registered for ' + this.event.title
      setTimeout(() => {  // After 3 seconds remove it
        this.GStore.flashMessage = ''
      }, 3000)

      this.$router.push({
        name: 'EventDetails',
        params: { id: this.event.id }
      })
    }
  }
}
</script>

 

Step 3: Displaying the Flash Message

/src/views/App.vue

Added an animation so that it’s highlighted in yellow and fades away (see the style)

<template>
  <div id="app">
    <div id="flashMessage" v-if="GStore.flashMessage">
      {{ GStore.flashMessage }}
    </div>
    ...
</template>
<script>
export default {
  inject: ['GStore'] // <---- 
}
</script>

<style>
@keyframes yellowfade {
  from {
    background: yellow;
  }
  to {
    background: transparent;
  }
}

#flashMessage {
  animation-name: yellowfade;
  animation-duration: 3s;
}

...
</style>

Sample Codes

https://github.com/Code-Pop/Touring-Vue-Router/tree/L8-end

GitHub - Code-Pop/Touring-Vue-Router