代码之家 › 专栏 › 技术社区 › pirmax

VueJS-VueX和flash消息

nuxt.js vuex vue.js

pirmax · 技术社区 · 6 年前

我使用 VueJS 2 ,则, VueX公司 ,则, NuxtJS公司 和 Vue Snotify ( artemsky/vue-snotify )用于flash通知。

这可能不是VueX的正确用法,但我想派遣在尝试/捕获中捕获的错误。

try {
    throw new Error('test')
} catch (error) {
    this.$store.dispatch('errorHandler', error)
}

然后,如果存在多个错误,则带有VueX的dispatch应使用Snotify视图显示通知,并显示一个循环。

actions: {
    async errorHandler (error) {
        this.$snotify.error(error)
        // and if multiple errors, then while on error
    }
}

您认为如何在VueX中恢复$snotify实例?

1 回复 | 直到 6 年前

Glenn 6 年前

令人不快的

我意识到 应用程序 在初始化 Vue 百货商店因此,您可以通过 this.app.$snotify 到 势利的 您需要的服务。

另外,在 百货商店 接收 Nuxt公司 上下文作为 第二个参数 是 nuxtServerInit [2] 。因此,您可以通道到服务使用下一个 一小条 。

actions: {
    nuxtServerInit ({ state }, { app }) {
        // Workaround
        state.Snotify = app.$snotify // inject the context in the store
    },
    // Then, you can called as you want
    // There is not necessity to prefix the method with async keyword
    errorHandler ({ state }, message) {
        state.Snotify.error(message)
    }
}

好的

在我看来 百货商店 不负责处理数据的表示行为。因此 百货商店 在这种情况下,是在组件之间传递消息,以在其他组件中显示为 flash消息 具有 势利的 在这种特殊情况下。因此,在结束我对声明的赞赏时,我认为行动只会改变状态的 百货商店 作为 唯一的真相来源 通过 definition 。

您必须使用突变而是只存储对象 .那么,在你看来或临时 (高阶组件)使用 势利的 如果可以的话。为了支持我的回答,我强烈建议 this 图书馆 因为它有更好的 API 与…沟通 Vuex公司 而且它还有一个良好的表示界面(UI/UX)。免责声明:我并不是说这个比 势利的 ,每一个都是为了满足略有不同的目的而构建的,至少就用户体验概念而言是这样的。两者都很好,可以用任何一种方式来说明这个用例。

我将更改您的第二个代码段:

state: {
    flash: null
}
mutations: {
    // Just extract message from the context that you are set before
    SET_ERROR (state, { message, title = 'Something happens!' }) {
        state.flash = { 
            type: 'error',
            title, 
            message
        }
    },
    FLUSH_FLASH (state) {
        state.flash = null
    }
}

此外,我将在一些视图/布局/组件/HOC(我使用 证监会 最常用的方式)

<template>
    <vue-snotify />
    ...
</template>

<script>
   export default {
       // I use fetch because this is the lifecycle hook that executes 
       // immediately before page render is sure. And its purpose is to fill
       // the store before page render. But, to the best of my knowledge, 
       // this is the only place that you could use to trigger an immediately
       // executed function at the beginning of page render. However, also
       // you could use a middleware instead or "preferably use a wrapper 
       // component and get leverage of component lifecycle and use `mounted`" [4]
       fetch({ app, store }) {
           if (store.state.flash) {
               const { type, title, message: body } = store.state.flash
               const toast = app.$snotify[type](body, title)

               toast.on('destroyed', (t) => { store.commit('FLUSH_FLASH') })
           }
       },
       data: () => ({
           ...
       })
</script>

也许,上面的代码对您来说功能不全,但我建议您应该测试一种类似的方法,并适合您的需要。

编辑

我想指出我的答案的另一个改进,基于我最近更新的与 组件生命周期 .在开始时,我实际上想将消息放在组件中 mounted 但后来我想 Nuxt公司 页面具有 不同的 生命周期,直到我看到这个 example 并意识到 Nuxt公司 仍然是 Vue 在背景上。因此,任何页面实际上也是 组成部分 通过 definition 也然后,您还可以使用语义方法。

<template>
    <vue-snotify />
    ...
</template>

<script>
   export default {
       data: () => ({
           ...
       }),
       // Show the flash at the beginning when it's necessary
       mounted: {
           if (this.notification) {
               const { type, title, message: body } = this.notification
               const toast = this.$snotify[type](body, title)

               toast.on('destroyed', (t) => { this.$store.commit('FLUSH_FLASH') })
           }
       },
       computed: {
           notification () {
               return this.$store.state.flush
           }
       }
</script>

参考文献

[1] https://zendev.com/2018/06/07/async-data-options-in-vue-nuxt.html

[2] https://twitter.com/krutiepatel/status/1000022559184764930

[3] https://github.com/artemsky/vue-snotify/blob/master/example/src/App/app.ts

[4] https://medium.com/@fishpercolator/implementing-a-global-snackbar-in-nuxt-js-vuetify-using-vuex-a92b78e5651b