Skip to content

Commit d91e3df

Browse files
DetachmentDetachment
committed
chang the sync.js file to make data related with router acessable in vuex
1 parent 220bf2a commit d91e3df

File tree

2 files changed

+49
-49
lines changed

2 files changed

+49
-49
lines changed

‎tutorials/0-vue.js-vuex-router/index.html

+48-48
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<script src="https://unpkg.com/[email protected]" charset="utf-8"></script>
1010
<script src="https://www.gstatic.com/firebasejs/3.6.5/firebase.js"></script>
1111
<script src="./api.js"></script>
12-
<!-- <script src="./sync.js"></script> -->
12+
<script src="./sync.js"></script>
1313
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> -->
1414
<link rel="stylesheet" href="./style.css">
1515
</head>
@@ -88,66 +88,66 @@
8888
loading: false,
8989
transition: 'slide-left',
9090
displayedPage:'1',
91-
displayedItems: [{score: '100', title: "You can you up", id: '1', url: "http://www.detachment.club"}, {score: '101', title: "You can you up, too", id: '2'}]
92-
// displayedPage: isInitialRender ? Number(this.$store.state.route.params.page) || 1 : -1,
93-
// displayedItems: isInitialRender ? this.$store.getters.activeItems : []
91+
// displayedItems: [{score: '100', title: "You can you up", id: '1', url: "http://www.detachment.club"}, {score: '101', title: "You can you up, too", id: '2'}]
92+
displayedPage: isInitialRender ? Number(this.$store.state.route.params.page) || 1 : -1,
93+
displayedItems: isInitialRender ? this.$store.getters.activeItems : []
9494
}
9595
},
9696

9797
props: ['item'],
9898

99-
// computed: {
100-
// page(){
101-
// return Number(this.$store.state.route.params.page) || 1
102-
// },
103-
// maxPage(){
104-
// const { itemsPerPage, lists } = this.$store.state
105-
// return Math.ceil(lists[this.type].length / itemsPerPage )
106-
// },
107-
// hasMore(){
108-
// return this.page < this.maxPage
109-
// }
110-
// },
99+
computed: {
100+
page(){
101+
return Number(this.$store.state.route.params.page) || 1
102+
},
103+
maxPage(){
104+
const { itemsPerPage, lists } = this.$store.state
105+
return Math.ceil(lists[this.type].length / itemsPerPage )
106+
},
107+
hasMore(){
108+
return this.page < this.maxPage
109+
}
110+
},
111111

112-
// beforeMount(){
113-
// if(this.$root._isMounted){
114-
// this.loadItems(this.page)
115-
// }
116-
// this.unwatchList = watchList(this.type, ids => {
117-
// this.$store.commit('SET_LIST', { type: this.type, ids })
118-
// this.$store.dispatch('ENSURE_ACTIVE_ITEMS').then(() => {
119-
// this.displayedItems = this.$store.getters.activeItems
120-
// })
121-
// })
122-
// },
112+
beforeMount(){
113+
if(this.$root._isMounted){
114+
this.loadItems(this.page)
115+
}
116+
this.unwatchList = watchList(this.type, ids => {
117+
this.$store.commit('SET_LIST', { type: this.type, ids })
118+
this.$store.dispatch('ENSURE_ACTIVE_ITEMS').then(() => {
119+
this.displayedItems = this.$store.getters.activeItems
120+
})
121+
})
122+
},
123123

124-
// beforeDestroy(){
125-
// this.unwatchList()
126-
// },
124+
beforeDestroy(){
125+
this.unwatchList()
126+
},
127127

128128
watch: {
129129
page(to, from){
130130
this.loadItems(to, from)
131131
}
132132
},
133133

134-
// methods: {
135-
// loadItems(to = this.page, from = -1){
136-
// this.loading = true
137-
// this.$store.dispatch('FETCH_LIST_DATA', {
138-
// type: this.page
139-
// }).then(() => {
140-
// if(this.page < 0 || this.page > this.maxPage){
141-
// this.$router.replace(`/${this.type}/1`)
142-
// return
143-
// }
144-
// this.transition = to > from ? 'slide-left' : 'slide-right'
145-
// this.displayedPage = to
146-
// this.displayedItems = this.$store.getters.activeItems
147-
// this.loading = false
148-
// })
149-
// }
150-
// }
134+
methods: {
135+
loadItems(to = this.page, from = -1){
136+
this.loading = true
137+
this.$store.dispatch('FETCH_LIST_DATA', {
138+
type: this.page
139+
}).then(() => {
140+
if(this.page < 0 || this.page > this.maxPage){
141+
this.$router.replace(`/${this.type}/1`)
142+
return
143+
}
144+
this.transition = to > from ? 'slide-left' : 'slide-right'
145+
this.displayedPage = to
146+
this.displayedItems = this.$store.getters.activeItems
147+
this.loading = false
148+
})
149+
}
150+
}
151151

152152
});
153153

@@ -242,7 +242,7 @@
242242
}
243243
})
244244

245-
// sync(store, router);
245+
sync(store, router);
246246

247247
new Vue({
248248
router,

‎tutorials/0-vue.js-vuex-router/sync.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ function sync(store, router, options) {
22
var moduleName = (options || {}).moduleName || 'route'
33

44
store.registerModule(moduleName, {
5-
state: cloneRoute(router.currentRoute),
5+
state: cloneRoute(router),
66
mutations: {
77
'router/ROUTE_CHANGED': function(state, transition) {
88
store.state[moduleName] = cloneRoute(transition.to, transition.from)

0 commit comments

Comments
 (0)