做项目的细节2

1.如何使用transition组件

<transition name="slide">
    <div class="modal" v-show="变量"></div>
</transition>
将需要过渡的内容嵌套
添加样式：
.modal{
    transition:all .5s;  //定义过渡动画
    &.slide-enter-active,&.slide-leave-active{
        //定义开始过程和结束过程的样式
    }
    &.slide-enter,&.slide-leave-to{
        //定义开始和结束时的样式
    }
}
注意先后顺序

2.图片懒加载的使用

npm install vue-lazyload@1.3.3 --save 
main.js全局引用
import VueLazyLoad from 'vue-lazyload' 
Vue.use(VueLazyLoad,{
    loading:'图片路径'  
})
页面使用：
v-lazy="'路径'"

3.登录的实现

访问登录接口传用户名和密码后台会返回一个token,再将token存到cookie里面去
拉取用户信息，可以在app.vue里面拉取，然后保存到vuex里面。
首页拉取信息不跳转到登录页面如何做：
    判断是否是index页面 let path = location.hash;
    if(path!='#/index'){ //再跳转登录 }

4.vuex状态管理模式(3.1.1)

state 存储变量，获取状态
getters  对状态的业务处理
mutations  用来修改state  commit
actions   异步   dispatch
module   模块 
vuex用来做数据的传输和共享 
mapState mapActions

vuex的使用

创建store文件夹的index.js文件
    import Vue from 'vue'
    import Vuex from 'vuex'
    import mutations from './mutation'
    import actions from './action'
    Vue.use(Vuex)
    export default new Vuex.Store({
        state,
        mutations,
        actions
    })
mutation文件
    export default {
        方法名(state,参数名){
            state.参数名 = 参数名
        }
    }
 actions文件 
     export default {
         方法名(content,参数名){
             content.commit('方法名',参数名)
         }
     }
 main.js里引入
     import store from './store'
     new Vue({
         store
     })
页面修改state状态：
    this.$store.dispatch('方法名',参数);
    或者 import {mapActions} from 'vuex' 
    ...mapActions(['方法名']) 
页面上获取state
    this.$store.state.方法名 
    或者 import {mapState} from 'vuex'
    ...mapState(['参数名'])
如果是在app里修改的参数在页面上获取会有延迟这时候可以写在计算属性里面
computed:{
    username(){
        return this.$store.state.username;
    }
}
作用：在app.vue里存储一次后就可以不用每次访问主页的时候获取接口。
只需要在每次刷新时获取和每次登录的时候获取，和每次需要修改时获取