小编Ste*_*n-v的帖子

我已经建立了一个包含多个模块的相当大的Vuex项目.

https://vuex.vuejs.org/en/modules.html

要获取getter的示例,search可以像这样解决模块中的getter :

computed: {
    filters() {
        return this.$store.state.search.filters;
    }
}

因为我需要通过引用search属性链中的属性来访问模块的状态,我还需要命名我的模块吗？

文档说明如下:

默认情况下,模块内的操作,突变和getter仍然在全局命名空间下注册 - 这允许多个模块对相同的突变/操作类型做出反应.

https://vuex.vuejs.org/en/modules.html#namespacing

但是如果模块在商店中属于它自己的属性并不是模块本身之间可能发生的唯一冲突,这可以通过文件的简单命名约定轻易地防止？

我在这里错过了什么？

我正在尝试根据这篇文章创建一些插件：

https://alligator.io/vuejs/creating-custom-plugins/

我有一个插件需要在根 Vue 实例挂载或创建时运行一些东西。到目前为止，我只能看到一种将某些东西注入所有组件的方法，这不是我想要的。

我只需要在主 Vue 实例挂载时做一些事情。我怎么能用插件做到这一点？

install插件中的方法似乎不起作用，因为这似乎发生在实际created方法之前。

我如何将额外的参数传递给 IntersectionObserver？我正在尝试为 Vue 创建一个延迟加载插件。它工作得很好，但我也希望能够调用提供的指令函数。

const lazyload = {
    install(Vue) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.intersectionRatio > 0) {
                    console.log('In viewport');
                }
            });
        });

        Vue.directive('lazy', {
            inserted(element) {
                observer.observe(element);
            }
        });
    }
};

这意味着在插入的函数中我将设置binding为第二个参数。

inserted(element, binding)

我将如何传递此绑定，以便我可以在 IntersectionObserver 回调中使用它？

最后它应该看起来像这样：

<div class="col-sm-6" v-lazy="fire">

目前，我正在使用加载所有Vue组件require.context，这会components使用正则表达式在目录中搜索.vue文件。这工作正常，但我也想通过动态导入加载异步组件。

目前，当我使用require.context所有文件时，即使我要使用动态导入，我的文件也已经加载，并且什么也没有发生。

我需要一种从require.context通话中排除某些文件的方法。我无法动态创建正则表达式，因为这不适用于require.context。

// How I currently load my Vue components.

const components = require.context('@/components', true, /[A-Z]\w+\.vue$/);

components.keys().forEach((filePath) => {
    const component = components(filePath);
    const componentName = path.basename(filePath, '.vue');

    // Dynamically register the component.
    Vue.component(componentName, component);
});

// My component that I would like to load dynamically.
Vue.component('search-dropdown', () => import('./search/SearchDropdown'));

看来唯一的方法就是手动声明我的所有组件，这很麻烦。

或创建一个静态正则表达式来跳过Async名称中包含的文件。这迫使我对异步组件采用某种命名约定。也不太理想。

会有更好的方法去做吗？

我试图将多个Vue组件导入为一个块,我最好只使用它magic comment来分配一次chunkname.

这是我尝试过的:

import(/* webpackChunkName: 'googlemap' */ '@/components/maps');

以及我导入的文件:

import Vue from 'vue';

Vue.component('google-map', () => import('@/components/maps/GoogleMapAsync.vue'));
Vue.component('widget', () => import('@/components/maps/widgets/WidgetAsync.vue'));
Vue.component('price-widget', () => import('@/components/maps/widgets/PriceWidgetAsync.vue'));
Vue.component('map-marker', () => import('@/components/maps/marker/MapMarkerAsync.vue'));
Vue.component('map-price-marker', () => import('@/components/maps/marker/MapPriceMarkerAsync.vue'));

这不会创建名称为的正确的块googlemap.以前我只是简单地把webpackChunkName每个导入放在前面,但我只想分配webpackChunkName一次,因为这些组件只会被分组.

我想做的事情与此基本相同:

https://hackernoon.com/effective-code-splitting-in-react-a-practical-guide-2195359d5d49#697a

还有另一种方法让这个工作吗？

我已经阅读了这篇关于无渲染组件的文章：

https://adamwathan.me/renderless-components-in-vuejs/

无法渲染的组件看起来像这样：

export default {
  render() {
    return this.$scopedSlots.default({})
  },
}

现在，我想使用此无渲染组件，而且还向添加到插槽中的内容添加一个Click侦听器。

就我而言，这将是一个按钮。我的无渲染组件将只包装一个按钮并向其添加一个单击侦听器，这将依次执行AJAX请求。

如何将点击侦听器添加到正在传递到广告位的元素中？

这是非常标准的登录功能和验证,可以很好地工作.但我还想检查用户是否处于活动状态.我在users表中设置了一个列,其中'active'设置为0或1.

public function post_login() 
{
    $input = Input::all();

    $rules = array(
        'email' => 'required|email',
        'password' => 'required',
    );  

    $validation = Validator::make($input, $rules);

    if ($validation->fails())
    {
        return Redirect::to_route('login_user')
            ->with_errors($validation->errors)->with_input();
    }

    $credentials = array(
        'username' => $input['email'],
        'password' => $input['password'],
    );

    if (Auth::attempt($credentials)) 
    {
        // Set remember me cookie if the user checks the box
        $remember = Input::get('remember');
        if ( !empty($remember) )
        {
            Auth::login(Auth::user()->id, true);
        }

        return Redirect::home();

    } else {
        return Redirect::to_route('login_user')
            ->with('login_errors', true);
    }
}

我已经尝试过这样的事了:

$is_active = Auth::user()->active;

if …

我想知道如何从这样的数组返回多个值：

var countries = [
    { key: "Spain", doc_count: 1378 },
    { key: "Greece", doc_count: 1259 }
];

到目前为止，这是我设置的内容，可以很好地返回单个值。我想知道如何才能通过多个国家/地区，而不是寻找一个国家/地区。

var countriesFound = countries.filter(function(country) {
    return country.key === 'Spain';
});

关于这一点，我还想将找到的对象添加到数组的前面，这样我就可以在countrys数组中复制它。

使用此方法会导致一些意外的结果，因为我最终将一个数组作为countrys数组中的第一项，并将想要的对象存储在该数组中。

countries.unshift(countriesFound);

结果输入（至少我认为它看起来像这样）：

var countries = [
    [{ key: "Spain", doc_count: 1378 }],
    { key: "Spain", doc_count: 1378 },
    { key: "Greece", doc_count: 1259 }
];

我正在开发一些我想放在NPM包中的Vue组件.我面临的问题是我不知道如何发布依赖于Vuex模块的组件.

我已将这个组件库所需的所有代码整齐地放入一个单独的Vuex模块中,但是当有人导入我的软件包时如何注册我的模块？

一个好的开始就是创建一个插件我想但我仍然需要检查一个Vuex实例并以某种方式注册我的模块.

我已经看过很多关于如何发布Vue组件的教程,但没有看到更复杂的东西.

有什么建议？

I have copied one of the pre-defined layouts from https://vuetifyjs.com/layout/pre-defined.

However when the content of the main section overflows it cause a scroll to appear for the whole app, rather than a local scroll to the main section. Here is an example:

<template>
    <v-app toolbar footer>

        <v-toolbar class="blue darken-3" dark>
        </v-toolbar>

        <v-navigation-drawer permanent clipped light absolute>
        </v-navigation-drawer>

        <main>
            <v-container>
                <p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p><p>hi</p>
            </v-container>
        </main>
    </v-app>
</template>

I've tried adding class="scroll-y" and style="max-height: 100%" to various sections with no progress.

What do …