Weex-hackernews是Weex項目里比較“先進”的demo酪劫。因為其是基于Vue開發(fā)的礁击，有完整清晰的項目結構华蜒，甚至可以將Weex-hackernews拿過來直接搬到自己的項目中去進行開發(fā)宾茂。下面我將逐條對其進行講解。
項目整體結構##
- components：存放視圖組件的.vue文件
- store：存放接口請求的方法及數(shù)據(jù)封裝對象
- view：存放主視圖的.vue文件难捌，即控制器膝宁。
- entry.js：全局對象聲明
- router.js：路由聲明
重點就這幾塊，只要這幾塊能理解清楚寫項目就沒有什么問題了根吁。
router.js###
只需要將你的.vue文件導入到router.js中员淫，然后配置路由就可以訪問你的界面了。這里舉個例子
import Home from './views/Home.vue'
export default new Router({
routes: [
{ path: '/home', component: Home },
{ path: '/', redirect: '/home' }//這是根路由击敌，第一次進來就訪問它
]
})
如果你的Home.vue有點內(nèi)容的話就可以在網(wǎng)頁上呈現(xiàn)了介返。
store里才是重點###
store里主要是處理網(wǎng)絡和數(shù)據(jù)部分，使用的是Vuex的語法
1沃斤、actions.js#####
View獲取接口數(shù)據(jù)需要調用這里的方法圣蝎。
export function FETCH_LIST_DATA ({ commit, dispatch, state }, { type }) {
commit('SET_ACTIVE_TYPE', { type })
return fetchIdsByType(type)
.then(ids => commit('SET_LIST', { type, ids }))
.then(() => dispatch('ENSURE_ACTIVE_ITEMS'))
}
這個是最典型的，commit方法是將數(shù)據(jù)通過某個方法保存起來衡瓶，而真正去發(fā)送請求的是fetchIdsByType(type)徘公，如果view想要拿到數(shù)據(jù)，必須先保存起來再使用哮针。
2关面、fetch.js#####
這里主要是具體地去調接口了，可以看到
export function fetch (path) {
// console.log('----------> fetch: ' + path)
return new Promise((resolve, reject) => {
stream.fetch({
method: 'GET',
url: `${baseURL}/${path}.json`,
type: 'json'
}, (response) => {
// console.log('----------> response.status: ' + response.status)
if (response.status == 200) {
resolve(response.data)
}
else {
reject(response)
}
}, () => {})
})
}
這是一個get請求的模板十厢，還可以封裝post等請求的模板等太。這里才是真正與與服務器做交互的地方。
3蛮放、index.js#####
這里是數(shù)據(jù)聲明的地方缩抡，如果想在view使用接口傳過來的某個數(shù)據(jù)，都需要在這里做預定義處理包颁，方便方法將數(shù)據(jù)存儲在你預定義的變量里缝其。
const store = new Vuex.Store({
actions,
mutations,
//新建一個clientId變量
clientId:null,
......
})
只需要在new Vuex.Store里聲明一下。
4徘六、mutations.js#####
這邊就是具體將值賦值給定義的變量内边，看個栗子就明白了
export function SET_ACTIVE_TYPE (state, { type }) {
state.activeType = type
}
這樣相信你可以將store里的內(nèi)容連起來了，這里你或許還有一個疑問待锈，我如何在view內(nèi)使用這些數(shù)據(jù)漠其，只要使用this.$store.clientId就可以拿到數(shù)據(jù)了。
結語##
其他模塊我也不再贅述，相信你自己會弄明白的和屎，最最主要的是store里東西拴驮。后期我會將繼續(xù)與手機端對接做介紹。本文純屬個人理解柴信，如有爭議套啤，還望指教。
