vue、vuex、js代码片段常见知识点

vue代码片段

1.1、vuex存储使用

	//commit同步操作
	this.$store.commit('name1',name) //存
	this.$store.state.name1 //取

	//dispatch异步操作
	this.$store.dispatch('name1',name)//存
	this.$store.getters.name1 //取

1.2、vuex内this.$store.dispatch()使用

1.3vuex缺点解决方案（刷新时会把vuex存储清除可以使用js-cookie或者 vuex-persisedstate）解决

2、watch 监听使用

	watch: {
	    name: {
	      immediate:true,//监听立即被执行
	      deep: true, //实时监听数据变化
	      handler (val) {
	       console.log(val)
	      }
	    }
	  }

3、父子之间传值

//子向父传
this.$emit('fun',val)
//父传子
prop:{}

4、更新视图

this.$forceUpdate()//强制更新视图

5、H5页面唤起手机拨打电话（拨号）

//拨打电话
  window.location.href = 'tel:4000-000-000';
  //发送短信 添加内容
	window.location.href = 'sms:10086?body=短信内容';
	//或者
	<a href="tel:4000-000-000">拨打电话</a>
	// 不添加内容
	window.location.href = 'sms:10086';
	//或者：
	<a href="sms:10086">发送短信</a>
	<a href="sms:10086?body=短信内容"></a>=

6、下载excel表格

//在请求头加
responseType:"blob"



	 let link = document.createElement("a");
	 link.style.display='none'
	 link.href=URL.createObjectUrl(url)
	 link.download='下载名称'
	 document.body.appendChild(link)
	 link.click()

7、vue生成唯一标识（uuid）

  guid(){
    return "xxxxxxxx-xxxx-4xxx-xxxxxxxxxxxxxxxxx".replace(
      /[xy]/g,
      function(c){
        var r=(Math.random()*16|0，
           v=c=='x'?r:(r & 0x3)|0x8;
           return v.toString(16)
        )
      }
    )
  }