vue零碎笔记

生命周期

export default {
    beforeCreate(){
        console.log("beforeCreate")
    },
    created(){
        console.log("created")
    },
    beforeMount(){
         console.log("挂载之前")
    },
    mounted(){
         console.log("挂载之后")
    },
    beforeUpdate(){
        console.log('更新之前')
    },
    updated(){
        console.log('更新之后')
    },
    beforeDestroy(){
        console.log('销毁之前')
    },
    destroyed(){
        console.log('销毁之后')
    }

}

// 路由守卫，时间节点
// 每次跳转之前触发
router.beforeEach((to,from,next)=>{
  console.log('每次跳转之前触发')
  // 需不需要继续跳转
  console.log(to)
  if(to.path=='/lifecom'){
    next('/nopage')
  }else{
    next()
  }

路由守卫

// 路由守卫，时间节点
// 每次跳转之前触发
router.beforeEach((to,from,next)=>{
  console.log('每次跳转之前触发')
  // 需不需要继续跳转
  console.log(to)
  if(to.path=='/lifecom'){
    next('/nopage')
  }else{
    next()
  }
  
})

export default {
    beforeRouteEnter(to,from ,next){
        console.log('组件路由进入之前')
        next()
    },
    beforeRouteUpdate(to,from ,next){
        //article/123==>article/456
        console.log('组件路由更新之前')
        next()
    },
    beforeRouteLeave(to,from ,next){
        console.log('组件路由离开之前')
        next()
    }
}

vuex

index.js

// 修改数据/状态的方法methods
  // payload就是commit调用时候的第二个参数
  mutations: {
    addAge(state,payload){
      // console.log(state)
      state.age += payload
    },
    getList(state,payload){
      state.list = payload
    }

// 异步修改数据
  actions: {
    // 去请求提供段子的服务器接口
    getJoke(context){
      let httpUrl = 'https://api.apiopen.top/getJoke?page=1&count=10&type=text'
      fetch(httpUrl).then((res)=>{
        return res.json()
      }).then((res)=>{
        console.log(res)
        context.commit('getList',res.result)
      })
    }

辅助函数

import { mapState,mapGetters,mapMutations,mapActions } from 'vuex

...mapActions(['getJoke']),
        ...mapMutations(['addAge','getList','setMallname']),
        ...mapMutations('luntan',['setLuntan'])
         ...mapState(['username','age','list','mall']),
        ...mapGetters(['xuAge']),
        ...mapState('luntan',['luntan'])

 <h1>姓名：{{$store.state.username}}</h1>
        <h2>年龄：{{$store.state.age}}</h2>
        <h2>虚岁：{{$store.getters.xuAge}}</h2>

        <h1>姓名：{{username}}</h1>
        <h2>年龄：{{age}}</h2>
        <h2>虚岁：{{xuAge}}</h2>

        <button @click="addAge(20)">添加老陈年龄</button>

vuex模块

export default {
    // namespaced:true,
    state:{
        mallname:"老陈商城"
    },
    mutations:{
        setMallname:function(state,payload){
            state.mallname = payload
        }
    }
}
     ...mapState('luntan',['luntan'])
     
        <h1 @click="setMallname('小陈商城')">{{mall.mallname}}</h1>
        <h1 @click="setLuntan('老王论坛')">{{luntan}}</h1>