Vue.js：使用vue-router和商店實現客戶端的靜態路由器

Question

我正在嘗試使用vue.js和vue-router實現客戶端的靜態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循環來返回正確的數據。

足球

<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>