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>&nbsp; &nbsp; <div id="app">&nbsp; &nbsp; &nbsp; &nbsp; <login-box :show="showLoginBox"></login-box>&nbsp; &nbsp; &nbsp; &nbsp; <router-view></router-view>&nbsp; &nbsp; </div></template>...computed: {&nbsp; &nbsp; &nbsp; &nbsp; showLoginBox() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return this.$store.state.showLoginBox&nbsp; &nbsp; &nbsp; &nbsp; },}