Vue随笔

WebStorage缓存存储方式

sessionStorage’作为html5中Web Storage的一种存储方式，localStorage和sessionStorage一样都是用来存储客户端临时信息的对象，sessionStorage 属性允许在浏览器中存储 key/value 对的数据，但是，sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

使用方法

setItem(key,value)——保存数据，以键值对的方式储存信息。

getItem(key)——获取数据，将键值传入，即可获取到对应的value值。

removeItem(key)——删除单个数据，根据键值移除对应的信息。

clear()——删除所有的数据

key(index)——获取某个索引的key

sessionStorage

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。

//缓存数据
sessionStorage.setItem('name','yun')
//读取数据
let str = sessionStorage.getItem('name');

localStorage

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。

var storage = null;
  if(window.localStorage){              //判断浏览器是否支持localStorage
    storage = window.localStorage;     
    storage.setItem("name", "Rick");    //调用setItem方法，存储数据
    alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick
    storage.removeItem("name");     //调用removeItem方法，移除数据
    alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null
}

Axios使用方法

• get：获取数据，请求指定的信息，返回实体对象
• post：向指定资源提交数据（例如表单提交或文件上传）
• put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
• patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
• delete：请求服务器删除指定的数据

1，npm安装：npm install axios

2，在main中配置

// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

3，即可在组件中的methonds中使用了下方是post请求

this.$axios.post("/addJ", {
                name: this.messageBoard.author,
                message: this.messageBoard.message
            }).then((resp) => {
                if (resp && resp.status === 200) {
                    this.messageBoard.message = '';
                    this.getDate();
                    this.$message({ message: '提交成功', type: 'success' });
                }

            })

4，下面是get请求

axios.get('url',{
    params:{
        id:'接口配置参数（相当于url?id=xxxx）'，
    },
})
.then((res)=>{
    console.log(res);   //  处理成功的函数 相当于success
})
.catch((error)=>{
    console.log(error)  //  错误处理 相当于error
})

5，并发请求方式

this.$axios.all([
	this.$axios.get('/goods.json'),
	this.$axios.get('/classify.json')
]).then(
	this.$axios.spread((goodsRes,classifyRes)=>{
		console.log(goodsRes.data);
		console.log(classifyRes.data);
	})
)

更详细的可以看下这个博主写的

axios使用方法https://blog.csdn.net/weixin_46174785/article/details/105981942?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-105981942-blog-115505991.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-105981942-blog-115505991.pc_relevant_default&utm_relevant_index=1