Trying to set up a client-side restful api with vue.js and vue-router where route params can be utilized to showcase a subset of a store's data into components. All the necessary data for the client is loaded into the store during initialization (not everything is displayed, including listeners to ensure data readiness).
Let's assume my store looks like this:
export default {
"state": {
"foosArray": [
{
"fooId": 1,
"foo1": "bar",
"foo2": "bar2"
},
{
"fooId": 2,
"foo1": "barbar1",
"foo2": "barbar2"
}
]
}
}
Now, if there's a route that needs to display one of the foos based on a fooId in the route param into a component: /foo/:fooId
In my Foo.vue file:
<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>
Query: What's the best method to achieve this? I've considered a few options, but none seem very optimal.
Option #1 - Computed Data: This is reactive, which aligns with using a library like vue.js, but could be computationally expensive.
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>
Option #2 - Using vue-router's data pipeline. This is simpler computationally, but might not be reactive to changes in the store's state.
<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>
Thank you!