最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

// src/main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

import App from './App'
import Home from './components/Home'
import 'bootstrap/dist/css/bootstrap.css'

Vue.use(VueRouter)
Vue.use(VueResource)

const routes = [{
 path : '/',
 component : Home
},{
 path : '/home',
 component : Home
}];

const router = new VueRouter({
 routes
});

/* eslint-disable no-new */
// 實(shí)例化我們的Vue
var app = new Vue({
 el: '#app',
 router,
 ...App,
});

//index.html

// src/App.vue

// src/components/Home.vue

// src/App.vue

 //...

 
 
  
 

在 Sidebar.vue 我們需要通過(guò)store去獲取總時(shí)間，我們的總時(shí)間是共享的數(shù)據(jù)

// src/components/Sidebar.vue

創(chuàng)建計(jì)劃列表組件

然后我們需要去創(chuàng)建我們的時(shí)間跟蹤列表。

// src/components/TimeEntries.vue

關(guān)于template的解釋?zhuān)紝?xiě)在一起了，再看看我們的 script

// src/components/TimeEntries.vue

別忘了為我們的組件寫(xiě)上一些需要的樣式

// src/components/TimeEntries.vue

既然我們的數(shù)據(jù)是共享的，所以我們需要把數(shù)據(jù)存在 store 里

我們?cè)趕rc下創(chuàng)建個(gè)目錄為 store

在 store 下分別創(chuàng)建4個(gè)js文件 actions.js , index.js , mutation-types.js , mutations.js

看名字也就知道這4個(gè)分別是做啥用的了，建議大家多閱讀閱讀 vuex 的文檔，多姿勢(shì)多動(dòng)手實(shí)踐，慢慢的也就能理解了。

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

// 先寫(xiě)個(gè)假數(shù)據(jù)
const state = {
 totalTime: 0,
 list: [{
 name : '二哲',
 avatar : 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256',
 date : '2016-12-25',
 totalTime : '6',
 comment : '12月25日完善，陪女朋友一起過(guò)圣誕節(jié)需要6個(gè)小時(shí)'
 }]
};

export default new Vuex.Store({
 state,
})

由于新增了頁(yè)面和store 在我們的入口js文件里配置下

// src/main.js
import store from './store'
import TimeEntries from './components/TimeEntries.vue'
//...

const routes = [{
 path : '/',
 component : Home
},{
 path : '/home',
 component : Home
},{
 path : '/time-entries',
 component : TimeEntries,
}];

var app = new Vue({
 el: '#app',
 router,
 store,
 ...App,
});

不出意外的話，你可以在 /time-entries 路由下看見(jiàn)這樣的頁(yè)面

通過(guò) vue-Devtools 我們可以發(fā)現(xiàn)我們的store已經(jīng)構(gòu)造好了并且成功從store獲取了數(shù)據(jù)

創(chuàng)建任務(wù)組件

這個(gè)比較簡(jiǎn)單我們直接給出代碼

// src/components/LogTime.vue

這個(gè)組件很簡(jiǎn)單就3個(gè)input輸入而已，然后就兩個(gè)按鈕，保存我們就把數(shù)據(jù)push進(jìn)我們store的列表里

LogTime 屬于我們 TimeEntries 組件的一個(gè)子路由，所以我們依舊需要配置下我們的路由，并且利用webpack讓它懶加載，減少我們首屏加載的流量

// src/main.js
//...
const routes = [{
 path : '/',
 component : Home
},{
 path : '/home',
 component : Home
},{
 path : '/time-entries',
 component : TimeEntries,
 children : [{
 path : 'log-time',
 // 懶加載
 component : resolve => require(['./components/LogTime.vue'],resolve),
 }]
}];

//...

vuex部分

在vue2.0中廢除了使用事件的方式進(jìn)行通信，所以在小項(xiàng)目中我們可以使用Event Bus，其余最好都使用vuex，本文我們使用Vuex來(lái)實(shí)現(xiàn)數(shù)據(jù)通信

相信你剛剛已經(jīng)看見(jiàn)了我寫(xiě)了很多 this.$store.dispatch('savePlan', plan) 類(lèi)似這樣的代碼，我們?cè)俅谓y(tǒng)一說(shuō)明。

仔細(xì)思考一下，我們需要兩個(gè)全局?jǐn)?shù)據(jù)，一個(gè)為所有計(jì)劃的總時(shí)間，一個(gè)是計(jì)劃列表的數(shù)組。

src/store/index.js 沒(méi)啥太多可介紹的，其實(shí)就是傳入我們的 state , mutations, actions 來(lái)初始化我們的Store。如果有需要的話我們還可能需要?jiǎng)?chuàng)建我們的 getter在本例中就不用了。

接著我們看 mutation-types.js ，既然想很明確了解數(shù)據(jù)，那就應(yīng)該有什么樣的操作看起，當(dāng)然這也看個(gè)人口味哈

// src/store/mutation-types.js

// 增加總時(shí)間或者減少總時(shí)間
export const ADD_TOTAL_TIME = 'ADD_TOTAL_TIME';
export const DEC_TOTAL_TIME = 'DEC_TOTAL_TIME';

// 新增和刪除一條計(jì)劃
export const SAVE_PLAN = 'SAVE_PLAN';
export const DELETE_PLAN = 'DELETE_PLAN';
// src/store/mutations.js
import * as types from './mutation-types'

export default {
 // 增加總時(shí)間
 [types.ADD_TOTAL_TIME] (state, time) {
 state.totalTime = state.totalTime + time
 },
 // 減少總時(shí)間
 [types.DEC_TOTAL_TIME] (state, time) {
 state.totalTime = state.totalTime - time
 },
 // 新增計(jì)劃
 [types.SAVE_PLAN] (state, plan) {
 // 設(shè)置默認(rèn)值，未來(lái)我們可以做登入直接讀取昵稱和頭像
 const avatar = 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256';
 
 state.list.push(
  Object.assign({ name: '二哲', avatar: avatar }, plan)
 )
 },
 // 刪除某計(jì)劃
 [types.DELETE_PLAN] (state, idx) {
 state.list.splice(idx, 1);
 }
};

最后對(duì)應(yīng)看我們的 actions 就很明白了

// src/store/actions.js

import * as types from './mutation-types'

export default {
 addTotalTime({ commit }, time) {
 commit(types.ADD_TOTAL_TIME, time)
 },
 decTotalTime({ commit }, time) {
 commit(types.DEC_TOTAL_TIME, time)
 },
 savePlan({ commit }, plan) {
 commit(types.SAVE_PLAN, plan);
 },
 deletePlan({ commit }, plan) {
 commit(types.DELETE_PLAN, plan)
 }
};

我們的 actions 其實(shí)就是去觸發(fā)事件和傳入?yún)?shù)啦

加了這三個(gè)文件后我們的store終于完整了，更新下我們的代碼

// src/store/index.js 完整代碼

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex);

const state = {
 totalTime: 0,
 list: []
};

export default new Vuex.Store({
 state,
 mutations,
 actions
})

this.$store.dispatch('savePlan', plan) 當(dāng)執(zhí)行了這樣的方法就會(huì)調(diào)用 actions.js 里的 savePlan 方法，而 savePlan 又會(huì)觸發(fā) mutations 里的 types.SAVE_PLAN 最后修改數(shù)據(jù)視圖更新

PS：在這有個(gè)技巧就是，在 mutations 里都是用大寫(xiě)下劃線連接，而我們的 actions 里都用小寫(xiě)駝峰對(duì)應(yīng)。

個(gè)人理解這其實(shí)就是一個(gè)發(fā)布訂閱的模式

mutation-types 記錄我們所有的事件名

mutations 注冊(cè)我們各種數(shù)據(jù)變化的方法

actions 則可以編寫(xiě)異步的邏輯或者是一些邏輯，再去 commit
我們的事件

如果有 getter 我們可以把一些需要處理返回的數(shù)據(jù)放在這即可，不進(jìn)行業(yè)務(wù)操作

最后別忘了在我們的 main.js 里使用我們的 store

// src/store/main.js

import store from './store'
// ...

var app = new Vue({
 el: '#app',
 router,
 store,
 ...App,
});

看完上述內(nèi)容，你們掌握vue2.0中怎么構(gòu)建一個(gè)單頁(yè)應(yīng)用的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！