vuex的一些需要知道的点

vuex

核心是 store，包含着应用中的大部分状态
Mutations 存放的是改变 state 的方法，更改store的状态的唯一方法是提交 mutation
Actions 存放的是一些业务逻辑，通常是异步任务。

安装

yarn add vuex

使用

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

==推荐使用辅助函数==

state
Getter
可以认为是store的计算属性，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Mutation
mutation必须是同步函数
Action
通过提交 mutation 实现状态更新，而不是直接更新状态
可以包含异步操作
Module
模块化状态,对每个模块添加命名空间(重要)

transition

Vue在插入、更新或者删除时，提供多种不同方式的应用过渡效果

<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>

动画钩子函数

<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() // 表示完成动画
    }
}

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：哈希，网址含#
abstract：网址不变

路由传参

通过params

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

这样的传参通过this.$route.params.age获取

通过query

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

编程式导航

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

这样的传参通过this.$route.query获取

导航方式总结

声明式导航	编程式导航	说明
`<router-link to="/">`	this.$router.push('/')	向history中添加记录
`<router-link to="/" replace>`	this.$router.replace('/')	不会向history中添加记录
————	this.$router.go(1)	历史记录中前进一页

params和query传参的区别，params 刷新页面，数据会丢失，解决办法是采用浏览器缓存（sessionStorage和localStorage）或者cookie将数据缓存下来。而query会把数据暴露在地址栏中，类似get请求。

嵌套路由规则

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

keep-alive

<keep-alive>是一个抽象组件，包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

props
- include：字符串或正则表达式。只有名称匹配的组件会被缓存。
- exclude：字符串或正则表达式。任何名称匹配的组件都不会被缓存。
- max：最多可以缓存多少组件实例。
keep-alive 提供了两个新的生命周期钩子函数
- actived:keep-alive 组件激活时调用。
- deactived:keep-alive 组件停用时调用。

axios

可以添加拦截器，请求拦截器和响应拦截器。在里面可以做 toast 提示