小编cal*_*r47的帖子

我正在为一个小应用程序使用Vue.js 2.0和Vuex 2.0.我正在通过调用从API检索初始状态的操作初始化根Vue实例上的'created'生命周期钩子中的存储....就像在我的根组件中一样:

const app = new Vue({
 el: "#app",
 router,
 store,
 data: {
     vacation: {},
 },
 components: {
    'vacation-status': VacationStatus,
 },
 created(){
    //initialize store data structure by submitting action.
    this.$store.dispatch('getVacation');
 },
 computed: {
 },
 methods: {
 }
});

这工作得很好.这是我在这里打电话给我的商店的行动:

getVacation({commit}){
  api.getVacation().then(vacation => commit(UPDATE_VACATION, vacation))
}

这与'UPDATE_VACATION'提交的变异在这里:

[UPDATE_VACATION] (state, payload) {
  state.vacation = payload.vacation;
},

我的问题:当我加载应用程序时,所有从商店"获取"值的组件会抛出错误,我试图访问商店中的"未定义"值.换句话说,状态尚未初始化.

例如,我有一个组件在子组件中具有getter,如下所示:

computed: {
        arrival () {
            return this.$store.getters.arrival
        },
        departure() {
            return this.$store.getters.departure
        },
        countdown: function() {
            return this.$store.getters.countdown …

我有由 Webpack 管理的构建过程。它将我的所有文件捆绑在一起并生成一个bundle.js文件。很典型的图案。

但是，当我将该文件包含bundle.js在网页中时，导出的默认函数未定义。为什么我不能从网页上的全局范围访问导出的函数？

这是我的 webpack 配置：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js',
    },
    performance: {
        hints: false,
    },
    resolve: {
        modules: ['node_modules', path.join(__dirname, 'src'), 'assets'],
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: 'file-loader',
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: `bundle.css`, …

使用角度 10

SO 上有很多与此类似的问题，但我还没有找到一个可以回答我的情况的问题。

我希望有人能指导我。

我正在使用第三方库来显示 360\xc2\xb0 照片。这个第三方库有一个内置的API来显示场景中的热点。只需向库提供您想要成为热点的元素，它就会处理其余的事情。

我的大部分内容都按预期工作，但有一些部分没有按预期工作。

到目前为止，我正在动态生成我的组件，如下所示：

this._hotspotFactory = this.resolver.resolveComponentFactory(HotspotComponent);\nconst component = this._hotspotFactory.create(this.injector);\n\n//Hydrate component with  bunch of data\ncomponent.instance.id = data.id;\n...\n\n// Create the Hotspot with Third Party\n// Calling this third party method injects the native element into the DOM. \n// Passing the nativeElement in. Looks great at first glance. \nconst hotspot = this._scene.createHotspot(data, component.location.nativeElement);\n\nthis.appRef.attachView(component.hostView);\ncomponent.hostView.detectChanges();\n\nif(component.instance.over.observers.length) {\n  hotspot.on(\'over\', (evt) => {\n    this.zone.run(() => {\n      component.instance.over.emit(evt);\n    });\n  });\n}\n\nif(component.instance.out.observers.length) {\n  hotspot.on(\'out\', (evt) => {\n    this.zone.run(() => …

我正在开发一个使用无法换出的第三方库的项目。它本质上是指向 URL 源并返回数据。它不返回承诺。它将返回的数据传递回匿名回调......不是你传递给函数的一个。

文档参差不齐，但这是他们指导您使用他们的库的方式。

third-party(URLsource, selector, scope)(function(err, data){ /* work with data array here*/ });

目前，代码一团糟。这部分是为了回调地狱和过度使用承诺。

通过 observables 传输数据将有助于简化和清理这个项目......但我仍在学习 RXjs 以及 observables 是如何工作的。

我认为这个问题将是一个很好的候选者：

let datapull = Rx.Observable.bindNodeCallback(third-party);
let result = datapull(URLsource, selector, scope);
result.subscribe(result => console.log(result), e => console.log("Error: " + e)

但是，这不起作用，因为最后一个参数是：

third-party(URLsource, selector, scope)

不是回调函数。

如何将此第三方函数的结果包装在 RX Observable 中？

我仍在学习 rxjs，并且我对如何为运算符 uniqueUntilChanged 编写自定义比较函数有点困惑。

我研究了使用distinctUntilKeyChanged，它对于单个键非常有用......但我有两个需要比较的键。

看来我可能需要合并扫描运算符来将发出的当前值与发出的最后一个值进行比较......？

好的，这是我的代码。我正在从谷歌地图流式传输地图中心更改。我不需要非常精确的地图中心地理位置，因此我对谷歌地图返回的大部分小数进行四舍五入。

searchStream$
  .map((value)=>{
  return {
    lat: round(value[1].lat, 1),
    lng: round(value[1].lng, 1)
  }
}).distinctUntilKeyChanged('lat')
  .do((position)=>{console.log(position)})
  .subscribe((position)=>{ this._store.dispatch(new QueryUpdateGeoPositionAPIAction({latitude: position.lat, longitude: position.lng})) });

回到我的问题，如何比较两个属性（纬度和经度）以确保它仅在其中一个值发生变化时才发出值？

谢谢您的帮助！

我正在使用弹性搜索 5.6。

我正在使用完成建议器在搜索字段中返回结果。我已成功映射和索引我的文档。我也得到了接近预期结果的结果。

在文档中，提到可以实现上下文来提升和/或过滤这里看到的结果：

完成建议器会考虑索引中的所有文档，但通常需要提供由某些标准过滤和/或提升的建议。

然而，我的问题是，我只收到过滤的结果......而不是简单的提升结果。如果我正确阅读文档，我应该能够在不过滤的情况下进行提升。文档

{
    "mappings": {
        "destination" : {
            "_all": {"enabled": false},
            "properties" :  {
                "name": {
                    "type": "text"
                },
                "suggest": {
                    "type": "completion",
                    "analyzer": "simple",
                    "contexts": {
                        "name": "location",
                        "type": "geo",
                        "path": "location"
                    }
                },
                "type": {
                    "type" : "keyword"
                },
                "state": {
                    "type" : "keyword"
                },
                "location": {
                    "type": "geo_point",
                    "index": true
                },
            }
        }
    }
}

{
  "name": "Portland",
  "location": [ …