Skip to content

Commit 220bf2a

Browse files
DetachmentDetachment
committed
made some progress in fetching data, but still not work
1 parent 8728012 commit 220bf2a

File tree

2 files changed

+119
-21
lines changed

2 files changed

+119
-21
lines changed

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

+58-21
Original file line numberDiff line numberDiff line change
@@ -9,6 +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> -->
1213
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> -->
1314
<link rel="stylesheet" href="./style.css">
1415
</head>
@@ -30,7 +31,6 @@
3031
</a>
3132
</div>
3233
</div>
33-
3434
<router-view class="view"></router-view>
3535
</div>
3636

@@ -47,12 +47,12 @@
4747
<transition :name="transition">
4848
<div class="news-list" :key="displayedPage" v-if="true">
4949
<transition-group tag="ul" name="item">
50-
<li v-for="item in displayedItems" :key="item.id" :item="item" class="news-item">
50+
<li v-for="item in displayedItems" :key="item.id" class="news-item">
5151
<span class="score">{{ item.score }}</span>
5252
<span class="title">
5353
<template v-if="item.url">
5454
<a :href="item.url" target="_blank">{{ item.title }}</a>
55-
<span class="host">({{ item.url | host }})</span>
55+
<span class="host">({{ item.url }})</span>
5656
</template>
5757
<template v-else>
5858
<router-link :to="'/item/' + item.id" >{{ item.title }}</router-link>
@@ -64,7 +64,7 @@
6464
by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
6565
</span>
6666
<span class="time">
67-
{{ item.time | timeAgo }} ago
67+
{{ item.time }} ago
6868
</span>
6969
<span v-if="item.type !== 'job'" class="comments-link">
7070
| <router-link :to="'/item/' + item.id ">{{ item.descendants }}</router-link>
@@ -87,33 +87,67 @@
8787
return {
8888
loading: false,
8989
transition: 'slide-left',
90+
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'}]
9092
// displayedPage: isInitialRender ? Number(this.$store.state.route.params.page) || 1 : -1,
9193
// displayedItems: isInitialRender ? this.$store.getters.activeItems : []
9294
}
9395
},
9496

9597
props: ['item'],
9698

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

110-
beforeMount(){
111-
if(this.$root._isMounted){
112-
this.loadItems(this.page)
113-
}
114-
}
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+
// },
115123

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

128+
watch: {
129+
page(to, from){
130+
this.loadItems(to, from)
131+
}
132+
},
133+
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+
// }
117151

118152
});
119153

@@ -208,8 +242,11 @@
208242
}
209243
})
210244

245+
// sync(store, router);
246+
211247
new Vue({
212248
router,
249+
store,
213250
el: '#app'
214251
})
215252
</script>

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

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
function sync(store, router, options) {
2+
var moduleName = (options || {}).moduleName || 'route'
3+
4+
store.registerModule(moduleName, {
5+
state: cloneRoute(router.currentRoute),
6+
mutations: {
7+
'router/ROUTE_CHANGED': function(state, transition) {
8+
store.state[moduleName] = cloneRoute(transition.to, transition.from)
9+
}
10+
}
11+
})
12+
13+
var isTimeTraveling = false
14+
var currentPath
15+
16+
// sync router on store change
17+
store.watch(
18+
function(state) {
19+
return state[moduleName]
20+
},
21+
function(route) {
22+
if (route.fullPath === currentPath) {
23+
return
24+
}
25+
isTimeTraveling = true
26+
currentPath = route.fullPath
27+
router.push(route)
28+
}, {
29+
sync: true
30+
}
31+
)
32+
33+
// sync store on router navigation
34+
router.afterEach(function(to, from) {
35+
if (isTimeTraveling) {
36+
isTimeTraveling = false
37+
return
38+
}
39+
currentPath = to.fullPath
40+
store.commit('router/ROUTE_CHANGED', {
41+
to: to,
42+
from: from
43+
})
44+
})
45+
}
46+
47+
function cloneRoute(to, from) {
48+
var clone = {
49+
name: to.name,
50+
path: to.path,
51+
hash: to.hash,
52+
query: to.query,
53+
params: to.params,
54+
fullPath: to.fullPath,
55+
meta: to.meta
56+
}
57+
if (from) {
58+
clone.from = cloneRoute(from)
59+
}
60+
return Object.freeze(clone)
61+
}

0 commit comments

Comments
 (0)