簡化vuex的寫法吮播，從而提高開發(fā)效率：
1.簡化state
第一步：引入import { mapState } from 'vuex'
第二步：在computed中添加mapState
computed:{
...mapState(['count','name','token']),
//當然也可以添加其他的計算屬性
},
2.簡化actions:
第一步：引入mapAction
import { mapActions } from 'vuex';
第二步：在methods中添加mapActions;
例如：
methods:{
...mapActions([ 'go' ,'play']),
goToB() {
//this.$store.dispatch('go',this.index)
this.go(this.index);
this.play();
}
}
如何獲取modules中的數(shù)據(jù)狀態(tài)
八芦圾、路由
路由懶加載：優(yōu)化減少找包文件體積，用到時才加載其中組件的js
老版本： r => require.ensure([], () => r(require('要加載的組件路徑')), '插入到頁面的js名稱')
新版本：const 組件名= () => import('.要加載的組件路徑')
九：各種鉤子函數(shù)
十：手機測試
==============vue路由=====================================
一员辩、路由是什么：主要用于實現(xiàn)單頁應用（SPA）的技術
二频轿、路由的實現(xiàn)原理：主要利用url的hash（#）和H5新增的history實現(xiàn)的
參考文章：
https://segmentfault.com/a/1190000007238999?utm_source=tag-newest
https://segmentfault.com/a/1190000011967786
三、vue路由實現(xiàn)
-
跳轉(zhuǎn)方式：標簽鸵赫，js方式
1.router-link
2.$route.push()或replace()
注意：vue路由必須要先從路由配置文件開始入手
2.組件展示：router-view
四、組件css的局部作用域
五躏升、使用less或sass
1.安裝：
less: npm install less less-loader --save
sass: npm insall sass-loader node-sass --save
2.在組件的style上添加lang
<style lang="less" scoped>
@w:100%;
.hd {
width:@w;
}
</style>
3.如何高亮顯示
例如：
//4.實例化路由
const router = new VueRouter({
routes,
linkExactActiveClass:'active'
})
六辩棒、如何引入svg sprites
七、路由懶加載
當打包構(gòu)建應用時煮甥，Javascript 包會變得非常大，影響頁面加載藕赞。如果我們能把不同路由對應的組件分割成不同的代碼塊成肘，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了
格式：const 組件名=()=>import('組件路徑');
例如： const shopping = () => import('../pages/shopping')
八：編程式路由
this.router.replace()
slot:插槽
路由傳參
路由守衛(wèi):
1.路由內(nèi)置的鉤子
beforeEnter
例如：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
2.全局鉤子
第一種：router.beforeEach(to, from) => {
// ...
})
第二種：router.afterEach((to, from) => {
// ...
})
3.組件內(nèi)的鉤子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染該組件的對應路由被 confirm 前調(diào)用
// 不斧蜕！能双霍！獲取組件實例 `this`
// 因為當守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
// 在當前路由改變批销，但是該組件被復用時調(diào)用
// 舉例來說洒闸，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候均芽，
// 由于會渲染同樣的 Foo 組件丘逸，因此組件實例會被復用。而這個鉤子就會在這個情況下被調(diào)用掀宋。
// 可以訪問組件實例 `this`
},
beforeRouteLeave (to, from, next) {
// 導航離開該組件的對應路由時調(diào)用
// 可以訪問組件實例 `this`
}
}