vue3自定义hooks遇到的问题

问题

写了一个输入查询参数和url返回加载中状态、请求方法、接口返回列表的hooks，出现的结果是只有请求方法有效，加载状态无效，接口返回了数据，页面却不显示数据。

代码如下

只展示部分关键代码

import { ref, toRefs, toRef, onMounted, onActivated, reactive } from 'vue';
import baseService from '@/service/baseService';
export default (props) => {
  const defaultOptions = {
    getListURL: '',
    dataForm: {},
	loading: false,
	dataList: []
  };
  const state = ref({ ...defaultOptions, ...props });
  const fetchList = () => {
    if (!state.value.getListURL) {
      return;
    }
    state.value.loading = true;
    baseService
      .get(state.value.getListURL, { ...state.value.dataForm })
      .then((res) => {
        if (res.code === 0) {
          state.value.dataList = [...res.data ];
        }
      })
      .finally(() => {
        state.value.loading = false;
      });
  };

  onMounted(() => {
     fetchList();
  });
  return {
    fetchList,
    dataList: state.value.dataList,
    loading: state.value.loading,
  };
};

页面使用

<el-row :gutter="20" v-loading="loading">
   <el-col :span="12" v-for="item in dataList" :key="item.id">
      <div class="item">
         {{ item.name }}
      </div>
   </el-col>
</el-row>

const params = ref({
  name: '', // 搜索框名称
});
const { loading, fetchList, dataList } = useDataList({
  dataForm: params.value,
  getListURL: '/page/list',
});

分析

好久没用vue3，写出来的代码让自己一时找不出来问题，唉。。。

第一次尝试

在使用文件下面打印列表查看一下

const { loading, fetchList, dataList } = useDataList({
  dataForm: params.value,
  getListURL: '/page/list',
});
console.log(dataList);

是Proxy包裹的空数组，这应该是响应的数据，不像解构赋值出现的响应丢失啊。

为防止真的是这个问题，在hooks导出时使用toRefs包裹一下看看

import { ref, toRefs, toRef, onMounted, onActivated, reactive } from 'vue';
import baseService from '@/service/baseService';
export default (props) => {
  const defaultOptions = {
    getListURL: '',
    dataForm: {},
	loading: false,
	dataList: []
  };
  const state = ref({ ...defaultOptions, ...props });
  const fetchList = () => {
    if (!state.value.getListURL) {
      return;
    }
    state.value.loading = true;
    baseService
      .get(state.value.getListURL, { ...state.value.dataForm })
      .then((res) => {
        if (res.code === 0) {
          state.value.dataList = [...res.data ];
        }
      })
      .finally(() => {
        state.value.loading = false;
      });
  };

  onMounted(() => {
     fetchList();
  });
  return {
    fetchList,
	...toRefs({
		dataList: state.value.dataList,
    	loading: state.value.loading,
	})
  };
};

这下真好，打印的是ObjectRefImpl，然而查看里面看到还是空数组。

第二次尝试

接口响应里面有问题吗？那就在接口成功里面打印一下试试看

import { ref, toRefs, toRef, onMounted, onActivated, reactive } from 'vue';
import baseService from '@/service/baseService';
export default (props) => {
  const defaultOptions = {
    getListURL: '',
    dataForm: {},
	loading: false,
	dataList: []
  };
  const state = ref({ ...defaultOptions, ...props });
  const fetchList = () => {
    if (!state.value.getListURL) {
      return;
    }
    state.value.loading = true;
    baseService
      .get(state.value.getListURL, { ...state.value.dataForm })
      .then((res) => {
        if (res.code === 0) {
          state.value.dataList = [...res.data ];
          console.log(state.value.dataList);
        }
      })
      .finally(() => {
        state.value.loading = false;
      });
  };

  onMounted(() => {
     fetchList();
  });
  return {
    fetchList,
    dataList: state.value.dataList,
    loading: state.value.loading,
  };
};

发现这里打印是有数据的，那在hooks方法里面返回前打印看看

import { ref, toRefs, toRef, onMounted, onActivated, reactive } from 'vue';
import baseService from '@/service/baseService';
export default (props) => {
  const defaultOptions = {
    getListURL: '',
    dataForm: {},
	loading: false,
	dataList: []
  };
  const state = ref({ ...defaultOptions, ...props });
  const fetchList = () => {
    if (!state.value.getListURL) {
      return;
    }
    state.value.loading = true;
    baseService
      .get(state.value.getListURL, { ...state.value.dataForm })
      .then((res) => {
        if (res.code === 0) {
          state.value.dataList = [...res.data ];
        }
      })
      .finally(() => {
        state.value.loading = false;
      });
  };

  onMounted(() => {
     fetchList();
  });
  console.log(state.value.dataList);
  return {
    fetchList,
    dataList: state.value.dataList,
    loading: state.value.loading,
  };
};

啊？这里也是空对象，看来问题还是出现在hooks里面啊。直接打印state看看吧（应该上一次打印，这两个都打印试试的）

import { ref, toRefs, toRef, onMounted, onActivated, reactive } from 'vue';
import baseService from '@/service/baseService';
export default (props) => {
  const defaultOptions = {
    getListURL: '',
    dataForm: {},
	loading: false,
	dataList: []
  };
  const state = ref({ ...defaultOptions, ...props });
  const fetchList = () => {
    if (!state.value.getListURL) {
      return;
    }
    state.value.loading = true;
    baseService
      .get(state.value.getListURL, { ...state.value.dataForm })
      .then((res) => {
        if (res.code === 0) {
          state.value.dataList = [...res.data ];
        }
      })
      .finally(() => {
        state.value.loading = false;
      });
  };

  onMounted(() => {
     fetchList();
  });
  console.log(state.value.dataList);
  console.log(state);
  return {
    fetchList,
    dataList: state.value.dataList,
    loading: state.value.loading,
  };
};

此时可以看到state里面是有接口返回的数据的，这样应该就说明不能使用.value获取之后返回使用，这时候的数据是接口响应前的。

那就改造一下直接返回ref（reactive的数据结构赋值之后是响应丢失的）

import { ref, toRefs, toRef, onMounted, onActivated, reactive } from 'vue';
import baseService from '@/service/baseService';
export default (props) => {
  const defaultOptions = {
    getListURL: '',
    dataForm: {},
  };
  const state = ref({ ...defaultOptions, ...props });
  const loading = ref(false);
  const dataList = ref({});
  const fetchList = () => {
    if (!state.value.getListURL) {
      return;
    }
    loading.value = true;
    baseService
      .get(state.value.getListURL, { ...state.value.dataForm })
      .then((res) => {
        if (res.code === 0) {
          dataList.value = [...res.data ];
        }
      })
      .finally(() => {
        loading.value = false;
      });
  };

  onMounted(() => {
     fetchList();
  });
  return {
    fetchList,
    dataList,
    loading,
  };
};

<el-row :gutter="20" v-loading="loading.value">
   <el-col :span="12" v-for="item in dataList.value" :key="item.id">
      <div class="item">
         {{ item.name }}
      </div>
   </el-col>
</el-row>



const params = ref({
  name: '', // 搜索框名称
});
const { loading, fetchList, dataList } = useDataList({
  dataForm: params.value,
  getListURL: '/page/list',
});

但是这是为什么，还是有问题啊？崩溃啊！

第三次尝试

在使用里面打印一下

<el-row :gutter="20" v-loading="loading.value">
   <el-col :span="12" v-for="item in dataList.value" :key="item.id">
      <div class="item">
         {{ item.name }}
      </div>
   </el-col>
</el-row>



const params = ref({
  name: '', // 搜索框名称
});
const { loading, fetchList, dataList } = useDataList({
  dataForm: params.value,
  getListURL: '/page/list',
});
console.log(dataList)

发现数据已经更新到接口返回的了，怎么页面没反应呢？额。。。好像页面模版里面可以省略.value，修改一下看看

<el-row :gutter="20" v-loading="loading">
   <el-col :span="12" v-for="item in dataList" :key="item.id">
      <div class="item">
         {{ item.name }}
      </div>
   </el-col>
</el-row>



const params = ref({
  name: '', // 搜索框名称
});
const { loading, fetchList, dataList } = useDataList({
  dataForm: params.value,
  getListURL: '/page/list',
});
console.log(dataList)

撒花，终于解决完问题了（刚才不手欠加个.value，就不用耽误一次修改了）

结尾

1. 自定义hooks，要想返回响应式ref数据，不要使用.value转一层，直接返回ref数据。
2. 模板里面使用ref数据时候，不要加.value

彩蛋

使用css实现多行超出显示...无效

超出一行没换行

有的换行，但是超出没显示...

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; 

这可能是英文文字太长导致的，这需要加上强制换行的css就可以

word-break: break-all;