vue全局登录框解决方案

Question

因为之前用过别人的组件库，所以我本来是想根据这个，自己写一个plugin，简单的提示类的我都实现了一些toast，各个地方都可以this.$toast();。复杂一点的，我想在各个路由页面都能呼出登录框，相当于是在很多页面当用户发生重要交互的时候，直接提示用户的登录或者注册，搞完了直接hide，回到之前的页面。但是我发现不能够作为插件调用项目的vuex，更改数据。。。。会报错dispatch没定义想问这种功能还有没有别的解决方案，或者说即使我这样写，我怎么拿到拿到回来的input参数，放到项目的state里呢？

Answer 1

插件里不是个 可配置的 选项， 你可以 全局store作为参数传进去？ 你想想 这样可以吗？

更暴力的写法 是在 Vue.prototype.$hStore = store

下面这种 大概写法

// 类似插件 文件

var pulgins =  Object.create(null);

pulgins.install = function(Vue, options) {

//

    var vm =  new Vue.extend({

          render () {

                    h('div', 

                    {

                     on: {

                         login () {

                           options.login()

                         },

                         cancel () {

                         options.cancel()

                         },

                     }

                    },

                    [

                     ...

                    ]

                    )

            }

      })

      

}

// 引用 文件

import store form 'store'

Vue.use(pulgins, {

    login() {store.dispatch('auth/login')},

   ...

})

Answer 2

提供一种不是插件的思路。

把login-box放在入口文件app.vue中，

这样在项目下任何地方都可以通过改变state来控制login-box的显示。

//app.vue

<template>

    <div id="app">

        <login-box :show="showLoginBox"></login-box>

        <router-view></router-view>

    </div>

</template>

...

computed: {

        showLoginBox() {

            return this.$store.state.showLoginBox

        },

}