鍍金池/ 問答/HTML/ vue全局登錄框解決方案

vue全局登錄框解決方案

因為之前用過別人的組件庫，所以我本來是想根據(jù)這個，自己寫一個plugin，簡單的提示類的我都實現(xiàn)了一些toast，各個地方都可以this.$toast();。

圖片描述

復(fù)雜一點的，我想在各個路由頁面都能呼出登錄框，相當(dāng)于是在很多頁面當(dāng)用戶發(fā)生重要交互的時候，直接提示用戶的登錄或者注冊，搞完了直接hide，回到之前的頁面。

但是我發(fā)現(xiàn)不能夠作為插件調(diào)用項目的vuex，更改數(shù)據(jù)。。。。會報錯dispatch沒定義

圖片描述

想問這種功能還有沒有別的解決方案，或者說即使我這樣寫，我怎么拿到拿到回來的input參數(shù)，放到項目的state里呢？

回答
編輯回答
終相守

提供一種不是插件的思路。
把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
        },
}
2018年4月21日 13:32
編輯回答
安于心

插件里不是個 可配置的 選項， 你可以 全局store作為參數(shù)傳進(jìn)去？ 你想想 這樣可以嗎？
更暴力的寫法 是在 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')},
   ...
})
2017年6月5日 07:30