Skip to content

Commit cdce738

Browse files
chmechme
committed
wip! [vue3] Remove mixin for nav guards
vue-router does not support navigation guards in mixins: <vuejs/router#454> For now remove the mixin and duplicate the code in every component (keep this branch rebaseable). In the future, this is a candidate for using the composition api: <https://next.router.vuejs.org/guide/advanced/composition-api.html#navigation-guards>
1 parent 1ab05e0 commit cdce738

28 files changed

+378
-98
lines changed

‎web-src/src/pages/PageAlbum.vue

+14-3
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,13 @@
3131
</template>
3232

3333
<script>
34-
import { LoadDataBeforeEnterMixin } from './mixin'
3534
import ContentWithHero from '@/templates/ContentWithHero.vue'
3635
import ListTracks from '@/components/ListTracks.vue'
3736
import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
3837
import CoverArtwork from '@/components/CoverArtwork.vue'
3938
import webapi from '@/webapi'
4039
41-
const albumData = {
40+
const dataObject = {
4241
load: function (to) {
4342
return Promise.all([
4443
webapi.library_album(to.params.album_id),
@@ -54,7 +53,6 @@ const albumData = {
5453
5554
export default {
5655
name: 'PageAlbum',
57-
mixins: [LoadDataBeforeEnterMixin(albumData)],
5856
components: { ContentWithHero, ListTracks, ModalDialogAlbum, CoverArtwork },
5957
6058
data () {
@@ -75,6 +73,19 @@ export default {
7573
play: function () {
7674
webapi.player_play_uri(this.album.uri, true)
7775
}
76+
},
77+
78+
beforeRouteEnter (to, from, next) {
79+
dataObject.load(to).then((response) => {
80+
next(vm => dataObject.set(vm, response))
81+
})
82+
},
83+
beforeRouteUpdate (to, from, next) {
84+
const vm = this
85+
dataObject.load(to).then((response) => {
86+
dataObject.set(vm, response)
87+
next()
88+
})
7889
}
7990
}
8091
</script>

‎web-src/src/pages/PageAlbums.vue

+14-3
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@
4444
</template>
4545

4646
<script>
47-
import { LoadDataBeforeEnterMixin } from './mixin'
4847
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
4948
import TabsMusic from '@/components/TabsMusic.vue'
5049
import IndexButtonList from '@/components/IndexButtonList.vue'
@@ -54,7 +53,7 @@ import webapi from '@/webapi'
5453
import * as types from '@/store/mutation_types'
5554
import Albums from '@/lib/Albums'
5655
57-
const albumsData = {
56+
const dataObject = {
5857
load: function (to) {
5958
return webapi.library_albums('music')
6059
},
@@ -69,7 +68,6 @@ const albumsData = {
6968
7069
export default {
7170
name: 'PageAlbums',
72-
mixins: [LoadDataBeforeEnterMixin(albumsData)],
7371
components: { ContentWithHeading, TabsMusic, IndexButtonList, ListAlbums, DropdownMenu },
7472
7573
data () {
@@ -125,6 +123,19 @@ export default {
125123
scrollToTop: function () {
126124
window.scrollTo({ top: 0, behavior: 'smooth' })
127125
}
126+
},
127+
128+
beforeRouteEnter (to, from, next) {
129+
dataObject.load(to).then((response) => {
130+
next(vm => dataObject.set(vm, response))
131+
})
132+
},
133+
beforeRouteUpdate (to, from, next) {
134+
const vm = this
135+
dataObject.load(to).then((response) => {
136+
dataObject.set(vm, response)
137+
next()
138+
})
128139
}
129140
}
130141
</script>

‎web-src/src/pages/PageArtist.vue

+14-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
</template>
3131

3232
<script>
33-
import { LoadDataBeforeEnterMixin } from './mixin'
3433
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
3534
import ListAlbums from '@/components/ListAlbums.vue'
3635
import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
@@ -39,7 +38,7 @@ import webapi from '@/webapi'
3938
import * as types from '@/store/mutation_types'
4039
import Albums from '@/lib/Albums'
4140
42-
const artistData = {
41+
const dataObject = {
4342
load: function (to) {
4443
return Promise.all([
4544
webapi.library_artist(to.params.artist_id),
@@ -55,7 +54,6 @@ const artistData = {
5554
5655
export default {
5756
name: 'PageArtist',
58-
mixins: [LoadDataBeforeEnterMixin(artistData)],
5957
components: { ContentWithHeading, ListAlbums, ModalDialogArtist, DropdownMenu },
6058
6159
data () {
@@ -94,6 +92,19 @@ export default {
9492
play: function () {
9593
webapi.player_play_uri(this.albums.items.map(a => a.uri).join(','), true)
9694
}
95+
},
96+
97+
beforeRouteEnter (to, from, next) {
98+
dataObject.load(to).then((response) => {
99+
next(vm => dataObject.set(vm, response))
100+
})
101+
},
102+
beforeRouteUpdate (to, from, next) {
103+
const vm = this
104+
dataObject.load(to).then((response) => {
105+
dataObject.set(vm, response)
106+
next()
107+
})
97108
}
98109
}
99110
</script>

‎web-src/src/pages/PageArtistTracks.vue

+14-3
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,13 @@
2727
</template>
2828

2929
<script>
30-
import { LoadDataBeforeEnterMixin } from './mixin'
3130
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
3231
import IndexButtonList from '@/components/IndexButtonList.vue'
3332
import ListTracks from '@/components/ListTracks.vue'
3433
import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
3534
import webapi from '@/webapi'
3635
37-
const tracksData = {
36+
const dataObject = {
3837
load: function (to) {
3938
return Promise.all([
4039
webapi.library_artist(to.params.artist_id),
@@ -50,7 +49,6 @@ const tracksData = {
5049
5150
export default {
5251
name: 'PageArtistTracks',
53-
mixins: [LoadDataBeforeEnterMixin(tracksData)],
5452
components: { ContentWithHeading, ListTracks, IndexButtonList, ModalDialogArtist },
5553
5654
data () {
@@ -82,6 +80,19 @@ export default {
8280
play: function () {
8381
webapi.player_play_uri(this.tracks.items.map(a => a.uri).join(','), true)
8482
}
83+
},
84+
85+
beforeRouteEnter (to, from, next) {
86+
dataObject.load(to).then((response) => {
87+
next(vm => dataObject.set(vm, response))
88+
})
89+
},
90+
beforeRouteUpdate (to, from, next) {
91+
const vm = this
92+
dataObject.load(to).then((response) => {
93+
dataObject.set(vm, response)
94+
next()
95+
})
8596
}
8697
}
8798
</script>

‎web-src/src/pages/PageArtists.vue

+14-3
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@
4444
</template>
4545

4646
<script>
47-
import { LoadDataBeforeEnterMixin } from './mixin'
4847
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
4948
import TabsMusic from '@/components/TabsMusic.vue'
5049
import IndexButtonList from '@/components/IndexButtonList.vue'
@@ -54,7 +53,7 @@ import webapi from '@/webapi'
5453
import * as types from '@/store/mutation_types'
5554
import Artists from '@/lib/Artists'
5655
57-
const artistsData = {
56+
const dataObject = {
5857
load: function (to) {
5958
return webapi.library_artists('music')
6059
},
@@ -66,7 +65,6 @@ const artistsData = {
6665
6766
export default {
6867
name: 'PageArtists',
69-
mixins: [LoadDataBeforeEnterMixin(artistsData)],
7068
components: { ContentWithHeading, TabsMusic, IndexButtonList, ListArtists, DropdownMenu },
7169
7270
data () {
@@ -122,6 +120,19 @@ export default {
122120
scrollToTop: function () {
123121
window.scrollTo({ top: 0, behavior: 'smooth' })
124122
}
123+
},
124+
125+
beforeRouteEnter (to, from, next) {
126+
dataObject.load(to).then((response) => {
127+
next(vm => dataObject.set(vm, response))
128+
})
129+
},
130+
beforeRouteUpdate (to, from, next) {
131+
const vm = this
132+
dataObject.load(to).then((response) => {
133+
dataObject.set(vm, response)
134+
next()
135+
})
125136
}
126137
}
127138
</script>

‎web-src/src/pages/PageAudiobooksAlbum.vue

+14-3
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,13 @@
3131
</template>
3232

3333
<script>
34-
import { LoadDataBeforeEnterMixin } from './mixin'
3534
import ContentWithHero from '@/templates/ContentWithHero.vue'
3635
import ListTracks from '@/components/ListTracks.vue'
3736
import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
3837
import CoverArtwork from '@/components/CoverArtwork.vue'
3938
import webapi from '@/webapi'
4039
41-
const albumData = {
40+
const dataObject = {
4241
load: function (to) {
4342
return Promise.all([
4443
webapi.library_album(to.params.album_id),
@@ -54,7 +53,6 @@ const albumData = {
5453
5554
export default {
5655
name: 'PageAudiobooksAlbum',
57-
mixins: [LoadDataBeforeEnterMixin(albumData)],
5856
components: { ContentWithHero, ListTracks, ModalDialogAlbum, CoverArtwork },
5957
6058
data () {
@@ -84,6 +82,19 @@ export default {
8482
this.selected_track = track
8583
this.show_details_modal = true
8684
}
85+
},
86+
87+
beforeRouteEnter (to, from, next) {
88+
dataObject.load(to).then((response) => {
89+
next(vm => dataObject.set(vm, response))
90+
})
91+
},
92+
beforeRouteUpdate (to, from, next) {
93+
const vm = this
94+
dataObject.load(to).then((response) => {
95+
dataObject.set(vm, response)
96+
next()
97+
})
8798
}
8899
}
89100
</script>

‎web-src/src/pages/PageAudiobooksAlbums.vue

+14-3
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,14 @@
1818
</template>
1919

2020
<script>
21-
import { LoadDataBeforeEnterMixin } from './mixin'
2221
import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
2322
import IndexButtonList from '@/components/IndexButtonList.vue'
2423
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
2524
import ListAlbums from '@/components/ListAlbums.vue'
2625
import webapi from '@/webapi'
2726
import Albums from '@/lib/Albums'
2827
29-
const albumsData = {
28+
const dataObject = {
3029
load: function (to) {
3130
return webapi.library_albums('audiobook')
3231
},
@@ -38,7 +37,6 @@ const albumsData = {
3837
3938
export default {
4039
name: 'PageAudiobooksAlbums',
41-
mixins: [LoadDataBeforeEnterMixin(albumsData)],
4240
components: { TabsAudiobooks, ContentWithHeading, IndexButtonList, ListAlbums },
4341
4442
data () {
@@ -57,6 +55,19 @@ export default {
5755
},
5856
5957
methods: {
58+
},
59+
60+
beforeRouteEnter (to, from, next) {
61+
dataObject.load(to).then((response) => {
62+
next(vm => dataObject.set(vm, response))
63+
})
64+
},
65+
beforeRouteUpdate (to, from, next) {
66+
const vm = this
67+
dataObject.load(to).then((response) => {
68+
dataObject.set(vm, response)
69+
next()
70+
})
6071
}
6172
}
6273
</script>

‎web-src/src/pages/PageAudiobooksArtist.vue

+14-3
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,12 @@
2222
</template>
2323

2424
<script>
25-
import { LoadDataBeforeEnterMixin } from './mixin'
2625
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
2726
import ListAlbums from '@/components/ListAlbums.vue'
2827
import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
2928
import webapi from '@/webapi'
3029
31-
const artistData = {
30+
const dataObject = {
3231
load: function (to) {
3332
return Promise.all([
3433
webapi.library_artist(to.params.artist_id),
@@ -44,7 +43,6 @@ const artistData = {
4443
4544
export default {
4645
name: 'PageAudiobooksArtist',
47-
mixins: [LoadDataBeforeEnterMixin(artistData)],
4846
components: { ContentWithHeading, ListAlbums, ModalDialogArtist },
4947
5048
data () {
@@ -60,6 +58,19 @@ export default {
6058
play: function () {
6159
webapi.player_play_uri(this.albums.items.map(a => a.uri).join(','), false)
6260
}
61+
},
62+
63+
beforeRouteEnter (to, from, next) {
64+
dataObject.load(to).then((response) => {
65+
next(vm => dataObject.set(vm, response))
66+
})
67+
},
68+
beforeRouteUpdate (to, from, next) {
69+
const vm = this
70+
dataObject.load(to).then((response) => {
71+
dataObject.set(vm, response)
72+
next()
73+
})
6374
}
6475
}
6576
</script>

‎web-src/src/pages/PageAudiobooksArtists.vue

+14-3
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,14 @@
2020
</template>
2121

2222
<script>
23-
import { LoadDataBeforeEnterMixin } from './mixin'
2423
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
2524
import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
2625
import IndexButtonList from '@/components/IndexButtonList.vue'
2726
import ListArtists from '@/components/ListArtists.vue'
2827
import webapi from '@/webapi'
2928
import Artists from '@/lib/Artists'
3029
31-
const artistsData = {
30+
const dataObject = {
3231
load: function (to) {
3332
return webapi.library_artists('audiobook')
3433
},
@@ -40,7 +39,6 @@ const artistsData = {
4039
4140
export default {
4241
name: 'PageAudiobooksArtists',
43-
mixins: [LoadDataBeforeEnterMixin(artistsData)],
4442
components: { ContentWithHeading, TabsAudiobooks, IndexButtonList, ListArtists },
4543
4644
data () {
@@ -59,6 +57,19 @@ export default {
5957
},
6058
6159
methods: {
60+
},
61+
62+
beforeRouteEnter (to, from, next) {
63+
dataObject.load(to).then((response) => {
64+
next(vm => dataObject.set(vm, response))
65+
})
66+
},
67+
beforeRouteUpdate (to, from, next) {
68+
const vm = this
69+
dataObject.load(to).then((response) => {
70+
dataObject.set(vm, response)
71+
next()
72+
})
6273
}
6374
}
6475
</script>

0 commit comments

Comments
 (0)