Vue3 基础第三篇

声明数据要这样写，把数据集中放在一个对象中：

let state = reactive({
typeList: [],
arr:[]
});

如果没用setup语法糖，那么这个state需要return，state.arr这样的写法太麻烦，

这样直接 return { state };
<div>{{ state.arr }}</div>

所以可以在renturn的时候直接解构，前提要导入toRefs,这样就可以省去state直接使用：arr

第1步. import { toRefs } from "vue";
第2步. return { ...toRefs(state) };
第3步. <div>{{ arr }}</div>

编程式导航和路径传值

编程式导航useRouter( ), 这个函数的调用必须在setup下面，否则得到的是undefind。

方法还是先写好，并没有methods，所以方法自上而下按顺序写就行了，然后在onMoubnted钩子函数或者其他地方去调用。不要直接在钩子函数里写请求，这样不好控制。

<script>
import { onMounted } from "vue";
export default {
  setup() {
    //例如在钩子函数中调用
    onMounted(() => {
      fn();
      fn2();
    });

    //方法一
    let fn = () => {
      
    };
    
    //方法二  
    let fn2 = () => {
      
    };

    // 一定要return 
    return { fn,fn2 };
  }
};
</script>

路径传参的写法

传值：

router.push({ path: `/list`,query:{id:id} });

接收：

 onMounted(() => {
      console.log("获取到的参数", Route.query.id);
 });

如果不用setup语法糖，一定要return 使用的数据和方法

<script>
import axios from "axios";
import { reactive, toRefs, onMounted } from "vue";
import { useRoute } from 'vue-router';  // 编程导航
axios.defaults.baseURL = "/api";

export default {
props: {},
  setup() {
// 这个useRoute()要写在setup里面 否则是undefind
const Route = useRoute(); //获取到值

// data集中数据
const data1 = reactive({
lists: [],
total: "", //返回数据数量
      type: 1, //类别id
      count: 20, //一屏数量
      pageNum: 1, //页码
      bigUrl:'',
    });

// mounted 钩子函数 使用需导入
    onMounted(() => {
console.log("获取到的参数", Route.query.id);
      data1.type = Route.query.id
      getList();
    });

// 获取列表方法 发请求
let getList = () => {
      axios
        .get(
`/index.php?c=WallPaperAndroid&a=getAppsByCategory&cid=${data1.type}&start=${data1.pageNum}&count=${data1.count}`
        )
        .then((res) => {
console.log(res);
          data1.lists.push(...res.data.data); //这里数据要push 因为要加入下一页的数据
        });
    };

// 页面触底方法
window.addEventListener("scroll", function () {
if (
document.documentElement.clientHeight + window.scrollY >=
document.documentElement.scrollHeight
        ) {
console.log("触底了!!!!");
        data1.pageNum += 1; //页码+1
        getList(); //再次请求下一页的数据
      }
    });

let big = (url) => {
console.log("yulan", url);
// 打开弹窗
      data1.bigUrl = url
console.log(data1.bigUrl,"news");
      state.showBasic = true;
    };

const state = reactive({
showBasic: false,
    });

// 最后一定要return
return { data1, state, getList, big, ...toRefs(state) };
    },
};
</script>

打包白屏（路径不对）时

在vite.config.js的defineConfig中加入base:'./'

export default defineConfig({
  plugins: [vue()],
  lintOnSave: false,  //去掉eslint代码检测
  base:'./',
})

main.js里使用use时：

再上一个use后面继续.use( xx )

//先引入
import router from './router/index'

//再use
createApp(App).use(router).use(NutUI).mount('#app')