vuex

核心是 store蔚叨，包含著應(yīng)用中的大部分狀態(tài)
Mutations 存放的是改變 state 的方法帮碰，更改store的狀態(tài)的唯一方法是提交 mutation
Actions 存放的是一些業(yè)務(wù)邏輯辆沦，通常是異步任務(wù)尝哆。

安裝

yarn add vuex

使用

import Vue from ‘vuex’
import Vuex from 'vuex'
Vue.use(Vuex)

==推薦使用輔助函數(shù)==

• state
• Getter
  可以認(rèn)為是store的計(jì)算屬性帕棉，getter的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)空盼，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算亩歹。
• Mutation
  mutation必須是同步函數(shù)
• Action
  通過(guò)提交 mutation 實(shí)現(xiàn)狀態(tài)更新匙监，而不是直接更新狀態(tài)
  可以包含異步操作
• Module
  模塊化狀態(tài),對(duì)每個(gè)模塊添加命名空間(重要)

transition

Vue在插入、更新或者刪除時(shí)小作，提供多種不同方式的應(yīng)用過(guò)渡效果

<transition
    enter-class=""
    enter-active-class="animated fadeInLeft"
    enter-to-class=""
    leave-class=""
    leave-active-class="animated fadeOutLeft"
    leave-to-class=""
>
    <div class="tmp" v-if="isShow">div</div>
</transition>

動(dòng)畫鉤子函數(shù)

<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"
    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave=“afterLeave”
    v-on:leave-cancelled="leaveCancelled"
>
methods:{
    ...
    enter:function(el,done){
        done() // 表示完成動(dòng)畫
    }
}

vue-router

安裝

yarn add vue-router

使用

• 在main.js里

import VueRouter from 'vue-router'
Vue.use(VueRouter)
new Vue({
    el:"#app",
    router,
    render:h=>h(App)
})

• 配置路由

var routes =[
    {path:'/',component:ind},
    {path:'/msg',component:msg},
    {path:'/hi',component:hi}
]

界面

<div>
    <router-link to="/">ind</router-link>
    <router-link to="/msg">msg</router-link>
    <router-link to="/hi">hi</router-link>
    <router-view></router-view>
</div>

路由模式

• history：常用的模式
• hash：哈希舅柜，網(wǎng)址含#
• abstract：網(wǎng)址不變

路由傳參

• 通過(guò)params

{path:"/msg/:id/:msg",component:msg}
<router-link to="/msg/1/2">msg</router-link>

這樣的傳參通過(guò)this.$route.params.age獲取

• 通過(guò)query

{path:"/msg",component:msg}
<router-link to="/msg?a=1&b=2">msg</router-link>

編程式導(dǎo)航

this.$router.push("/")
this.$router.push({path:'/msg',query:{a:1,b:2}})

這樣的傳參通過(guò)this.$route.query獲取

• 導(dǎo)航方式總結(jié)

params和query傳參的區(qū)別，params 刷新頁(yè)面躲惰，數(shù)據(jù)會(huì)丟失致份，解決辦法是采用瀏覽器緩存（sessionStorage和localStorage）或者cookie將數(shù)據(jù)緩存下來(lái)。而query會(huì)把數(shù)據(jù)暴露在地址欄中础拨， 類似get請(qǐng)求氮块。

嵌套路由規(guī)則

{
    path:"/list",
    component:List,
    children:[
        {path:"/list/a",component:PageA},
        {path:"/list/b",components:PageB}
    ]
}

keep-alive

<keep-alive>是一個(gè)抽象組件，包裹動(dòng)態(tài)組件時(shí)诡宗，會(huì)緩存不活動(dòng)的組件實(shí)例滔蝉，而不是銷毀它們

• props

  • include：字符串或正則表達(dá)式。只有名稱匹配的組件會(huì)被緩存塔沃。
  • exclude：字符串或正則表達(dá)式蝠引。任何名稱匹配的組件都不會(huì)被緩存。
  • max：最多可以緩存多少組件實(shí)例蛀柴。

• keep-alive 提供了兩個(gè)新的生命周期鉤子函數(shù)

  • actived:keep-alive 組件激活時(shí)調(diào)用螃概。
  • deactived:keep-alive 組件停用時(shí)調(diào)用。

axios

可以添加攔截器鸽疾，請(qǐng)求攔截器和響應(yīng)攔截器吊洼。在里面可以做 toast 提示