vue学习5

原创已于 2023-02-14 10:12:16 修改 · 379 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-02-14 00:22:20 首次发布

本文介绍了Vue.js开发中常用的两个组件库——ElementUI和Vant的下载与引入方法，以及懒加载和Vuex状态管理的实践。在Vuex部分，提到了新写法和持久化存储的解决方案。此外，还讨论了加载提示的使用和axios请求中的处理。

vue学习5

（一）、elementUI组件库

下载：

npm i element-ui -S

导入：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
Vue.use(ElementUI)

（二）、vant组件库

下载：
vue2：

npm i vant@latest-v2

vue3：

npm i vant

引入：

import VUe from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

注意：下载组件库时，有eslint会报错，原因是版本过高。安装时后面添加–force可正常安装

（三）、懒加载

<template>
    <div>
        <van-list
  v-model:loading
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check="false"
>
  <van-cell v-for="data in datalist" :key="$data.filmId" @click="handleChangePage(data.filmId)" />
</van-list>
    </div>
</template>

<script>
import exp = require('constants');

export default{
    data(){
        return{
            datalist:[],
            loading:false,
            finished:false
        }
    },
        mounted(){
        axios({
            url:'数据地址',
            Headers:{
                地址头
            }
        }).then(res=>{
            this.datalist=[...this.datalist,...res.data.data.films]
            this.loading='false'
        })
    },
    methods:{
        onload(){
            if(this.datalist.length===datalist.total){
				this.finished=true
				return
				}
        }
    }
}
</script>

<style lang="scss" scoped>
.van-list{
    .van-cell{
        overflow: hidden;
        padding: .833333rem;
        img{
            width: 3.666667rem;
            float: left;
        }
        .title{
            font-size: .666667rem;
        }
        .content{
            font-size: 13px;
            color: gray;
            .actors{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
               width: 200px;
        }
        }
        
    }
}
</style>

（四）、加载

需要引入此方法再使用：

showLoadingToast({
  message: '加载中...',
  forbidClick: true,
  duration:0
});

请求后清除加载框：
在这里插入图片描述

在发请求前拦截：
在这里插入图片描述第二个是
成功后的拦截：第二个是失败回调

（五）、vuex

管理公共状态

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //公共状态
  state: {
    cityId:'310100',
    cityName:'上海'
  },
  getters: {
  },
  //方法
  //统一管理，被devtools记录状态的修改
  //只能支持同步
  mutations: {
    changeCityName
  },
  //支持同步和异步
  actions: {
  },
  modules: {
  }
})

通过this.$store访问store。
使用commit向mutation提交数据，让mutation来操作
默认刷新，公共状态就没了

vuex的项目应用：
1.非父子的通信
2.后端数据的缓存快照，减少重复数据请求，减轻服务器压力，提高用户体验

this.$store.dispatch() 分发action