사용자 정의 글로벌 Nuxt 플러그인(토스트)을 만드는 방법은 무엇입니까?

이 기사에서는 Toast(스낵바)가 될 동적 글로벌 nuxt 플러그인을 구축할 것입니다.

전제 조건:

뷰

뷰엑스

눅스트

이제 npx를 사용하여 Nuxt 앱을 만드는 것으로 시작해 보겠습니다.

npx create-nuxt-app nuxt-toast

단계를 따라 이동하고 이 튜토리얼에서 사용할 UI 프레임워크 옵션에서 Vuetify.js를 선택합니다. 그러나 Vuetify를 사용하지 않으려면 원하는 UI 프레임워크를 변경하거나 UI 없이도 변경할 수 있습니다. 뼈대.

Vuex를 사용하기 위해 store 폴더에 snackbar.js라는 파일을 만들고 다음과 같이 작성합니다.

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

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

토스트에 대한 내용과 색상 값이 있는 상태 함수와 상태 값을 페이로드 값으로 설정하는 메시지 표시 함수가 포함된 돌연변이 개체를 내보냅니다.

그런 다음 플러그인 폴더에 notifier.js라는 파일을 만들고 다음을 작성합니다.

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

여기에서는 vuex store를 사용하여 상태 값을 원하는 콘텐츠와 색상으로 설정하는 페이로드를 설정하기 때문에 두 개의 매개변수인 app 및 store 객체를 전달하는 플러그인의 기능을 내보내고 있습니다. this.$notifier 와 같이 호출되는 전역 nuxt 함수가 되도록 알리미 함수를 주입합니다.

그런 다음 구성 요소 폴더에 Snackbar.vue라는 파일을 만들고 vue 템플릿을 작성합니다.

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

보시다시피 우리는 축배를 위해 vuetify의 스낵바 구성 요소를 사용했습니다. vuetify를 사용하지 않으려면 원하는 대로 사용자 지정 구성 요소를 만듭니다.

그런 다음 템플릿 아래에 스크립트 태그를 작성합니다.

<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>

여기에서 데이터(showSnackbar, 메시지, 색상)를 정의하고 있습니다. created() 후크에서 this.$store.subscribe 함수를 사용하여 돌연변이 및 상태 매개변수를 얻을 때 돌연변이 저장을 구독하므로 돌연변이 유형이 동일한지 확인합니다. "snackbar/showMessage"로 (snackbar.js 파일 및 우리 가게의 showMessage 기능).

( for more info about store subscribe )

그런 다음 다음과 같이 스낵바 구성 요소를 default.vue 레이아웃 파일로 가져옵니다.

<template>
  <v-app>
    <v-main>
      <v-container>
        <nuxt />
      </v-container>
    </v-main>
    <Snackbar></Snackbar>
  </v-app>
</template>

<script>
import Snackbar from "~/components/Snackbar";

export default {
  components: {
    Snackbar
  }
};
</script>

마지막으로 플러그인을 작동시키기 위해 마지막으로 하는 일은 다음과 같이 nuxt.config.js 파일에 플러그인을 정의하는 것입니다.

  plugins: ["~/plugins/notifier.js"],

따라서 index.vue 후크의 mounted()에서 플러그인을 사용해 보겠습니다.

mounted() {
  this.$notifier.showMessage({
    content: "YAY Our Plugin worked Successfully!",
    color: "success"
  });
}

HTTP 요청 응답에 사용하거나 원하는 대로 사용할 수 있습니다.

기사가 도움이 되었기를 바랍니다!



트위터: