浅谈vue3数据管理

vue3的出现可以是我们的代码更加的灵活，此处就再次简单说下vue3+js数据管理。

import {
  toolGroupAPI,
} from "@/services/get.js";//封装的接口
export default function toolGroupListTable() {
  const toolGroupTable = ref([]); //定义的响应式数据
  const toolGroupOneTable = ref([]); 
  const toolGroup = (e) => {//定义的接口方法
    toolGroupAPI(e)
      .then((res) => {
        toolGroupTable.value = res.data;  
        // console.log(res);
      })
      .catch((res) => {
        console.log(res);
      });
  };
  return {
    toolGroup,
    toolGroupTable,//在此处将接口请求方法和数据导出
  };
}

然后我们就可以在主页面引入这些数据

import toolGroupListTable from "@/composables/tooljs/tool-setting/toolGroup.js";//引入js文件
export default defineComponent({
setup(props，context) {//props用来接受属性，context接受方法
    const {
      toolGroup,
      toolGroupTable,  
    } = toolGroupListTable();//将数据在此处解构，这些数据使用ref定义，因此解构不会丢失响应性，与此具有相同的效果的还有reactive,
    toolGroup();//setup相当于vue2生命周期里的created，可以在此时请求初始化需要显示的数据
const state = reactive({//在此处创建一个响应式的对象
          count:0
})
 return {
      ...toRefs(state),//解构返回state可以在HTML代码里直接使用state里的数据，不用加state.并且数据具有响应式
      toolGroup,
      toolGroupTable,
    };
} ,

 })