基于vue3的compositonAPI 组合式api的特点, 我们可以很灵活的封装一些复用性高的逻辑,那么分享一下,我是如何进行封装的
1. 创建一个plugins文件(用于存放公共逻辑)
2. 创建一个ts文件(或者js文件) 在文件中我们将用到的函数和方法引入进来
import {
isRef,
onMounted,
reactive,
ref,
watch,
watchEffect,
toRefs,
computed
} from "vue";
import { useStore } from "vuex";
import axios from 'axios'
import { useRoute, useRouter } from "vue-router";
3. 通过 export 将函数等导出 (这里我将 此功能用到的变量和函数都放到了 rickFun函数中,并且return出去, 在此函数中 也可以用到vue的生命周期以及 vuex 和 router等方法, 在这就体现出了composition api的好用了)
export function rickFun(){
const pageData:any = reactive({
flag:false,
form:{
name:'',
department:'',
position:'',
date:'',
id:''
},
tableData:[],
activeIndex:0,
watchActiveIndex:0,
computedActiveIndexfirst:0,
computedActiveIndexsecond: 1,
acacc: computed(() => {
return String(pageData.computedActiveIndexfirst) + pageData.computedActiveIndexsecond +"computed计算出的"
})
})
watch(() => pageData.activeIndex,(old,newData)=>{
pageData.watchActiveIndex -= 1
})
const computedData = computed(()=>{
console.log(1);
return pageData.computedActiveIndex+100
})
const methods = {
// 显示添加表格
addTable(){
pageData.flag = true;
},
// 取消添加表单
cancelTable(){
pageData.flag = false;
},
// 添加表格数据
addTableData(){
if(pageData.form.name===''){
if (!confirm('确定添加空白吗')){
return false;
}
}
pageData.tableData.push(pageData.form as never)
pageData.form = {
name: '',
department: '',
position: '',
date: '',
id: ''
};
console.log(pageData.tableData);
},
// 编辑表格数据
editTableData(data:any){
pageData.flag = true;
pageData.form = JSON.parse(JSON.stringify(data))
},
// 删除表格数据
deleteTableData(index:any){
pageData.tableData.splice(index,1)
}
}
onMounted(() => {
setInterval(()=>{
pageData.activeIndex+=1
},1500)
axios.request({
url: '../../js2/staff.json',
method: 'get',
}).then((res) => {
pageData.tableData = res.data.list;
}).catch(err => {
console.log(err);
});
})
return{
pageData,
...methods,
computedData
}
}
4. 将公共的功能逻辑写好后, 就可以到vue文件 引入我们想要的方法和属性了, 引入后不要忘记在setup函数中return出去, 这样在页面中我们就可以用 封装好的变量以及方法了
import { rickFun, typescript } from "../../plugins/common";
export default defineComponent({
component: {},
name: "",
setup() {
const store = useStore();
const { pageData,computedData, ...methods } = rickFun(); // 在这
const study = typescript();
const classObject:any = computed(()=>{
return{
active2:pageData.activeIndex%2===0,
active:pageData.activeIndex%2!==0
}
})
onMounted(() => {
console.log("组件挂载到页面之后执行");
}); // 组件挂载到页面之后执行-------onMounted
return {
// 因为setup是一个函数,函数是有自己的作用域的,本函数内的作用域外部无法访问到,所以需要return出去
...toRefs(pageData),
...methods,
store,
classObject
};
},
});
最后附上我的demo效果图
这就是我封装公共逻辑使用的方法 希望各位多多指教