vue3-事件-toRefs-钩子-fetch
2021-09-13 本文已影响0人
云高风轻
1. 前言
v3事件这块变化不大
但是新增了 单值响应式相关内容
2. 事件 -toRefs
2.1 模板
<p>转化:{{count}}</p>
<button @click="add">修改</button>
2.2 导入相关
import {
reactive,
ref,
toRefs,
onMounted
} from 'vue'
2.3 添加事件 toRefs
setup() {
// 响应式对象
const state = reactive({
count: 0,
})
//*****************************自定义函数 */
// 点击事件
const add = (event) => {
state.count++
}
return {
...toRefs(state),
add
}
}
1.注意这些
state和自定义函数都是直接写在setup里面的
2.上节课说state不能使用...展开会破坏结构,在模板使用的时候每次都会多加1层,比较麻烦
3.所以使用toRefs不会破坏内部结构,使用的时候直接使用就行
3. ref 单值响应式
只针对一个值
3.1 简要代码
const anthorCounter = ref(1)
return {
anthorCounter,
...toRefs(state),
add
}
返回的时候 直接返回就行
3.2 使用
<p>单值响应式:{{anthorCounter}}</p>
4. onMounted
直接写到 setUp里面
4.1 基本代码
// 响应式对象
const state = reactive({
count: 0,
msg: "提示"
})
//*****************************自定义函数 */
// 点击事件
const add = (event) => {
console.log("-------", event)
state.count++
console.log("state", state)
}
// Ref类型
// 单值响应式 可以直接用
const anthorCounter = ref(1)
// ******************* 生命周期 钩子
onMounted(() => {
console.log("mounted 挂载的时候执行")
fetch("https://xx.yzs.org/v1/?type=1").then(res => {
console.log("res 拦截:",res.text())
}).then(res=>{
console.log("res:",res)
state.msg = "成功"
//这点可以看文档 单值响应式 必须 加 value
anthorCounter.value = 10
}).catch(err=>{
console.log("错误信息:",err)
}).finally(()=>{
console.log("完成:")
})
})
// toRefs 全部转换
return {
anthorCounter,
...toRefs(state),
add
}
4.2 分析
1.单值响应式 ref文档 必须 加 value
anthorCounter.value = 10
2.fetch用法
3.钩子也是写在setUp里面
4.3 fetch封装
src/api/fetch.js
const fetchGet = function(url, params) {
let list = [];
for (let key in params) {
let str = `${key}=${params[key]}`
list.push(str);
}
const data = list.join('&');
let allUrl = `${url}?${data}`;
// debugger
return fetch(allUrl).then(res => {
return res.json();
}).catch(err => {
console.log(err);
});
};
const fetchPost = function(url, params) {
let formData = new FormData();
for (let key in params) {
formData.append(key, params[key])
};
return fetch(url, {
body: formData,
method: 'POST'
}).then(res => {
return res.json();
}).catch(err => {
console.log(err);
})
};
const fetchAll = function(url, params, method='GET') {
if (method === 'GET' || method === 'get') {
return fetchGet(url, params);
}
return fetchPost(url, params);
}
export default {
fetchGet,
fetchPost,
fetchAll
}
4.4 fetch使用
引入
import myFetch from '@/api/fetch.js';
使用
onMounted(() => {
console.log("mounted 挂载的时候执行")
myFetch.fetchGet("https://xx.yzs.org/v1", {
type: "1"
}).then(res => {
singState.name = res.name
console.log(res);
}).catch(err => {
console.log(err);
})
