vue那些事

一、form表单提交完成之后的刷新问题

问题描述：在同一个页面进行提交，会出现无法刷新的问题
解决：
1、原始方法

location.reload()

2、Vue自带的方法

this.$router.go(0);

出现问题：闪烁
3、利用父子组件进行刷新
App页面弄一个新的reload（）方法

<template>
  <div id="app">
    <router-view  v-if="isShow"/>
  </div>
</template>

<script>
    export default {
        name: 'App',
        provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
            return {
                reload: this.reload
            }
        },
        data() {
            return{
                isShow: true                    //控制视图是否显示的变量
            }
        },
        methods: {
            reload () {
                this.isShow= false;            //先关闭，
                this.$nextTick(function () {
                    this.isShow= true;         //再打开
                })
            }
        },
    }
</script>

在使用的页面利用inject引入

export default{
	inject:['reload'],
	data(){
		return{
		}
		}
}

二、计数器的使用

<script>
	export defalut{
		data(){
		return{
		Resttime: 5,   //时间树
		Timer: null,  //计数器对象
		}
	},
	methods: {
	timer(){
	   //开启计时器
       this.Timer=setInterval(()=>{
         this.Resttime--             //每隔固定时间进行的操作
         if(this.Resttime==0){
           console.log("计数器截至后，所做的事情")
           clearInterval(this.Timer)     //清除计时器对象，不然会一直进行下去
         }
       },1000)     
	}},
	//在周期函数中调用计数器
	created() {
      this.timer()
    }
	}
</script>

三、前端拦截器的实现

1、需要在router对象中设置拦截，重写（不知道这样说对不对，可以按这个理解）router中的beforeEach()方法
2、新建一个routerFileter.js文件

import router from '@/router'
const whites =['/']            //白名单--允许通过的路由
router.beforeEach(to,from,next){      
for{ let i=0;i<whites.length;i++}{
	if(to.path===whites[i]){
		next()
		return
	}else{
		next('/')
	}
}
}
export default router

参数解释：
to:携带要去的路由的信息
from：携带从哪里来的路由的信息
next：允许通过的函数
进一步的联系操作：可以利用token，判断是否有页面的显示权限，以达到“登录”效果！！

四、修改element-ui input样式（样式穿透）

1、//使用 /deep/

.el-input /deep/ .el-input__inner {
    background-color: rgba(255, 255, 255, 0.247);
}

2、//使用 >>>

.el-input >>> .el-input__inner {
    background-color: rgba(255, 255, 255, 0.247);
}

五、vuex持久化（防止数据刷新）

1、利用插件

import createPersistedState from 'vuex-persistedstate'

conststore = newVuex.Store({
	plugins: [createPersistedState({
	          storage: window.sessionStorage     //默认会在localstorage
	      })]
	      })

2、直接利用sessionStorage

sessionStorage(key,val)      

3、调用方式

 import  { mapGetters,mapMutations } from 'vuex'			//引用进来
 methods: {
  ...mapMutations(['SET_TOKEN','SET_ID']),			//方法中使用this.SET_ID()调用即可
    computed:{
    ...mapGetters(['GET_TYPEID'])							//方法中使用this.GET_TYPEID调用即可
    },
  }

this.$store.commit.('SET_TOKEN','20')      //利用commit的方式进行提交