在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ vue全局登錄框解決方案

vue全局登錄框解決方案

因?yàn)橹坝眠^(guò)別人的組件庫(kù),所以我本來(lái)是想根據(jù)這個(gè),自己寫一個(gè)plugin,簡(jiǎn)單的提示類的我都實(shí)現(xiàn)了一些toast,各個(gè)地方都可以this.$toast();。

圖片描述

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

但是我發(fā)現(xiàn)不能夠作為插件調(diào)用項(xiàng)目的vuex,更改數(shù)據(jù)。。。。會(huì)報(bào)錯(cuò)dispatch沒(méi)定義

圖片描述

想問(wèn)這種功能還有沒(méi)有別的解決方案,或者說(shuō)即使我這樣寫,我怎么拿到拿到回來(lái)的input參數(shù),放到項(xiàng)目的state里呢?

回答
編輯回答
終相守

提供一種不是插件的思路。
把login-box放在入口文件app.vue中,
這樣在項(xiàng)目下任何地方都可以通過(guò)改變state來(lái)控制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
編輯回答
安于心

插件里不是個(gè) 可配置的 選項(xiàng), 你可以 全局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