Vue.js：使用 vue-router 和 store 实现客户端 restful 路由器

Question

我正在尝试使用 vue.js 和 vue-router 实现一个客户端 restful api，其中路由参数可用于将商店数据的子集显示到组件中。客户端需要的所有数据都在初始化时加载到存储中（其中大部分没有显示，包括确保数据准备就绪的侦听器）。

例如，假设我的商店结构如下：

export default {
    "state": {
        "foosArray": [
            {
                "fooId": 1,
                "foo1": "bar",
                "foo2": "bar2"
            },
            {
                "fooId": 2,
                "foo1": "barbar1",
                "foo2": "barbar2"
            }
        ]
    }
}

现在假设我有一个路由，它想根据路由参数中的 fooId 将其中一个 foo 显示到一个组件中：/foo/:fooId

在我的 Foo.vue 文件中：

<template>
    <h1>FooId: {{ fooId }}</h1><br>
    <h2>Foo1: {{ foo1 }}<h2><br>
    <h2>Foo2: {{ foo2 }}</h2>
</template>

<script>
    export default {
        "name": "Foo",
        data () {
            return {
                "fooId": -1,
                "foo1": "",
                "foo2": ""
            }
        }
    }
</script>

问题：实现这一目标的最佳方法是什么？我想了几个选项，但似乎没有一个是最理想的。

选项#1 - 计算数据：这具有反应性的好处（使用像 vue.js 之类的库的意义...耶！），但代价是计算量大. 编辑 - 结果我不能使用下划线，而是需要使用一堆 for 循环来返回正确的数据。

Foo.vue

<template>
    <h1>FooId: {{ myFooId }}</h1><br>
    <h2>Foo1: {{ myFoo1 }}<h2><br>
    <h2>Foo2: {{ myFoo2 }}</h2>
</template>

<script>
    import Store from '../store/store.js'
    import _ from "underscore"

    export default {
        "name": "Foo",
        data () {
            return {
                "sharedState": Store.state
            }
        },
        "computed": {
            "myFooId": function() {
                let oTempFoo = _.findWhere(this.sharedState.foosArray, { "id": this.$route.params.fooId });

                return oTempFoo ? oTempFoo["id"] : "";
            },
            "myFoo1": function() {
                let oTempFoo = _.findWhere(this.sharedState.foosArray, { "id": this.$route.params.fooId });

                return oTempFoo ? oTempFoo["foo1"] : "";
            },
            "myFoo2": function() {
                let oTempFoo = _.findWhere(this.sharedState.foosArray, { "id": this.$route.params.fooId });

                return oTempFoo ? oTempFoo["foo2"] : "";
            }
        }
    }
</script>

选项 #2 - 使用 vue-router 的数据管道。这样做的好处是计算更简单，但我认为这不会对商店状态的变化产生反应（那么有什么意义呢？）。

<template>
    <h1>FooId: {{ fooId }}</h1><br>
    <h2>Foo1: {{ foo1 }}<h2><br>
    <h2>Foo2: {{ foo2 }}</h2>
</template>

<script>
    import Store from '../store/store.js'
    import _ from "underscore"

    export default {
        "name": "Foo",
        data () {
            return {
                "fooId": -1,
                "foo1": "",
                "foo2": ""
            }
        },
        "route": {
            data: function (transition) {
                let oTempFoo = _.findWhere(Store.state.foosArray, { "id": this.$route.params.fooId })
                transition.next(oTempFoo);
            }
        }
    }
</script>

谢谢！

Answer 1

我已经实现了以下。它使我不必为每个显示的值运行计算数据元素。我希望有一些更简单的东西，比如我可以在 UberFoo 中实现的 v-with="myFoo"，这样我就不需要使用子组件了。

UberFoo.vue

<template>
    <minor-foo :data="myFoo"><minor-foo>
</template>

<script>
    import Store from '../store/store.js'
    import MinorFoo from './MinorFoo.vue'

    export default {
        'name': 'UberFoo',

        data () {
            return {
                'sharedState': Store.foosArray
            }
        },

        'components': {
            'minor-foo': MinorFoo
        },

        'computed': {
            myFoo: function() {
                for ( var i = 0; i < this.sharedState.length; i++ ) {
                    if ( this.sharedState[i]["fooId"] == this.$route.params.fooId ) return this.sharedState[i];
                }

                return {
                    "fooId": null,
                    "foo1": null,
                    "foo2": null
                }
            }
        }
    }
</script>

MinorFoo.vue

<template>
    <h1>FooId: {{ data.fooId }}</h1><br>
    <h2>Foo1: {{ data.foo1 }}<h2><br>
    <h2>Foo2: {{ data.foo2 }}</h2>
</template>

<script>
    export default {
        'name': 'MinorFoo',

        'props': ['data']
    }
</script>