Vue 6

最新推荐文章于 2024-06-13 11:09:32 发布

081&33

最新推荐文章于 2024-06-13 11:09:32 发布

阅读量166

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_51398691/article/details/119793630

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文件路径的引用问题–起别名

webpack.base.conf.js

 alias: {
      '@': resolve('src'),
        'assets':resolve('@/assets'),
        //这种写法在脚手架二里面不行
       'assets':resolve(src/assets'),
      'components':resolve('src/components'),
      'views':resolve('src/views'),
    }

注意

1      <img slot="item-icon"src="~assets/img/TabBar/-home.png" alt="">
//在dom元素里面这必须加波浪线

2  import TabBar from "components/tabbar/TabBar"
//在这里不用加波浪线

executor执行 .exe 结尾，是这个的缩写，可以双击打开的文件
sync 异步
async 同步

Promise介绍和基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  //1.使用settimeout
  setTimeout(() => {
    console.log('hello world');
  },1000 )

  //参数 -> 函数（resolve,reject）
  //resolve,reject本身它们又是函数
  new Promise((resolve, reject) => {
    //第一次网络请求的代码
    setTimeout(() => {
    //在这里调用resolve，就会去到下边执行我们的then
      resolve()
    },1000)
  }).then(() => {
    //第一次拿到结果的处理代码
    console.log('hello');
    return new Promise((resolve,reject) => {
      //第二次网络请求的代码
      setTimeout(() => {
        resolve()
      },1000)
    })
  }).then(()=>{
    console.log('2');
  })
</script>
</body>
</html>

在这里插入图片描述

在什么情况下会遇到promise

一般情况下是有异步操作时，使用promise对这个异步操作进行封装
new -> 构造函数（1.保存了一些状态信息 2.执行传入的函数）

promise三种状态和另外处理方式

 new Promise((resolve,reject) => {
    setTimeout(() => {
      //成功时调用resolve
      //失败时调用reject
      resolve('hello')
      reject('err')
    },1000)}).then((data) => {
      console.log(data);
    }).catch((err) => {
      console.log(err);
    })

写成一个函数，并且，一个参数可以省略
 new Promise((resolve,reject) => {
    setTimeout(() => {
      //成功时调用resolve
      //失败时调用reject
      resolve('hello')
      reject('err')
    },1000)}).then(data => {
    console.log(data);
  },err => {
    console.log(err);
  })

在这里插入图片描述

promise链式调用

链式调用一

  new Promise((resolve, reject) => {
    //第一次网络请求的代码
    setTimeout(() => {
      resolve()
    },1000)
  }).then(() => {
    //第一次拿到结果的处理代码
    console.log('hello');
    return new Promise((resolve,reject) => {
      //第二次网络请求的代码
      setTimeout(() => {
        resolve()
      },1000)
    })
  }).then(()=>{
    console.log('2');
  })

链式调用二

resolve处理结果的三种方法

<script>
  // wrapped into 包裹
//  网络请求 ：aaa -> 自己处理（10行）
//  处理：aaa111 -> 自己处理(10行)
//  处理：aaa111222 -> 自己处理
  new Promise ((resolve,reject) => {
    setTimeout(() => {
      resolve('aaa')
    },1000)
  //  只有第一次有延迟
  }) .then((res) => {
    //1 自己处理10行代码
    console.log(res,'第一层的10行处理代码');
  //  2 对结果进行第一次处理
    return new Promise((resolve) => {
      resolve(res + '111')
    })
  }).then((res) => {
    console.log(res,'第二层的10行处理代码');
    return new Promise((resolve) => {
      resolve(res + '222')
    })
  }).then(res => {
    console.log(res,'第三层的10行处理代码');
  })
  
  // new Promise(resolve => resolve(结果))简写
  new Promise ((resolve,reject) => {
    setTimeout(() => {
      resolve('aaa')
    },1000)
    //  只有第一次有延迟
  }) .then((res) => {
    //1 自己处理10行代码
    console.log(res,'第一层的10行处理代码');
    //  2 对结果进行第一次处理
    return Promise.resolve(res + '111')
  }).then((res) => {
    console.log(res,'第二层的10行处理代码');
    return Promise.resolve(res + '222')
  }).then(res => {
    console.log(res,'第三层的10行处理代码');
  })
  
  //省略掉Promise.resolve
  new Promise ((resolve,reject) => {
    setTimeout(() => {
      resolve('aaa')
    },1000)
    //  只有第一次有延迟
  }) .then((res) => {
    //1 自己处理10行代码
    console.log(res,'第一层的10行处理代码');
    //  2 对结果进行第一次处理
    return res + '111'
  }).then((res) => {
    console.log(res,'第二层的10行处理代码');
    return res + '222'
  }).then(res => {
    console.log(res,'第三层的10行处理代码');
  })
</script>

reject处理结果的三种写法

结果会打印aaa 第一层的10行处理代码 err message

new Promise ((resolve,reject) => {
    setTimeout(() => {
      resolve('aaa')
    },1000)
  //  只有第一次有延迟
  }) .then((res) => {
    //1 自己处理10行代码
    console.log(res,'第一层的10行处理代码');
  //  2 对结果进行第一次处理
      return new Promise((resolve,reject) => {
        // resolve(res + '111')
        reject('err message');
    })
  }).then((res) => {
    console.log(res,'第二层的10行处理代码');
    return new Promise((resolve) => {
      resolve(res + '222')
    })
  }).then(res => {
    console.log(res,'第三层的10行处理代码');
  }).catch(err => {
    console.log(err);
  })

  // new Promise(resolve => resolve(结果))简写
  new Promise ((resolve,reject) => {
    setTimeout(() => {
      resolve('aaa')
    },1000)
     // 只有第一次有延迟
  }) .then((res) => {
    // 1 自己处理10行代码
    console.log(res,'第一层的10行处理代码');
     // 2 对结果进行第一次处理
    return Promise.reject('err message')
  }).then((res) => {
    console.log(res,'第二层的10行处理代码');
    return Promise.resolve(res + '222')
  }).then(res => {
    console.log(res,'第三层的10行处理代码');
  }).catch(err => {
    console.log(err);
  })

  new Promise ((resolve,reject) => {
    setTimeout(() => {
      resolve('aaa')
    },1000)
    // 只有第一次有延迟
  }) .then((res) => {
    // 1 自己处理10行代码
    console.log(res,'第一层的10行处理代码');
    // 2 对结果进行第一次处理
    // return Promise.reject('err message')
    throw 'err message'
  }).then((res) => {
    console.log(res,'第二层的10行处理代码');
    return Promise.resolve(res + '222')
  }).then(res => {
    console.log(res,'第三层的10行处理代码');
  }).catch(err => {
    console.log(err);
  })

Promise的all方法

这里有两个请求,当我们都拿到的时候才进行,下面是一种思路，不使用all方法


  //请求一:
  let isresult1 = false
  let isresult2 = false
  $ajax({
    url:'',
    success:function () {
      console.log('结果一');
      isresult1 = true
      handleResult()
    }
  })
  //请求二
  $ajax({
    url:'',
    success:function () {
      console.log('结果二');
      isresult2 = true
      handleResult()
    }
  })
  function handleResult(){
    if(isresult1&&isresult2){

    }
  }

使用all方法


  Promise.all([
    //   new Promise((resolve,reject) => {
    //     $ajax({
    //       url:'url1',
    //       success:function (data) {
    //         resolve(data)
    //       }
    //     })
    //   }),
    // new Promise((resolve, reject) => {
    //   $ajax({
    //     url:'url1',
    //     success:function (data) {
    //       resolve(data)
    //     }
    //   })
    // })
      new Promise((resolve,reject) => {
        setTimeout(() =>{
          resolve({name: 'why', age: 10})
          //注意这里要写大括号
        },1000)
      }),
    new Promise((resolve,reject) => {
      setTimeout(() =>{
        resolve({name:'haha',age: 23})
      },2000)
    })
  ]).then((result) => {
    //这里的result是一个数组,result[0]放的时第一个请求的结果,以此类推
    console.log(result);
  })

Vuex的作用和概念解析

linus发明了linux和git

vuex是做什么的
在这里插入图片描述

我们自己实现的不是响应式的

 //这个东西不是响应式的,即当这里的数据改变之后,界面不会发生改变
const shareObj = {
    name:'gaga'
}

//所有的组件都是继承原型的
Vue.prototype.shareObj = shareObj

  Vue.component('cpn1',{
    this.shareObj.name
  })

  Vue.component('cpn1',{
    this.shareObj.name
  })
  const app = new Vue({
    el:'#app',
    data:{

    }
  })
</script>

管理状态
在这里插入图片描述

单页面到多页面状态管理切换

在这里插入图片描述

两个组件多页面利用父子通信传递count

app.vue
<template>
  <div id="app">
<h2>{{message}}</h2>
    <h2>{{count}}</h2>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <hello-vuex :count="count"/>
  </div>
</template>

<script>
import HelloVuex from "../src/components/HelloVuex";
export default {
  name: 'App',
  components:{
    HelloVuex
  },
 data(){
    return {
      message:'我是app组件',
      count:0
    }
 }
}
</script>

<style>

</style>

<template>
  <div>
    <h2>{{count}}</h2>
  </div>
</template>

<script>
  export default {
    name: "HelloVuex",
    props:{
         count:Number
    }
  }
</script>

<style scoped>

</style>

npm install vuex --save安装vuex
我们可以在main.js里面写，但是这样的话main.js就会变得非常大，所以我们创建一个文件夹，在src,叫store

app.vue


<template>
  <div id="app">
<h2>{{message}}</h2>
    <h2>{{$store.state.count}}</h2>
    <button @click="$store.state.count++">+</button>
    <button @click="$store.state.count--">-</button>
<!--    这样虽然也能改,但是在后续开发中会有一些问题,建议按照规定好的格式来修改-->
    <hello-vuex :count="count"/>
  </div>
</template>

<script>
import HelloVuex from "../src/components/HelloVuex";
export default {
  name: 'App',
  components:{
    HelloVuex
  },
 data(){
    return {
      message:'我是app组件',
    }
 }
}
</script>

<style>

</style>

hellovuex.js

<template>
  <div>
    <h2>{{$store.state.count}}</h2>
  </div>
</template>

<script>
  export default {
    name: "HelloVuex",
    props:{
         count:Number
    }
  }
</script>

<style scoped>

</style>

index.js

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

//1 安装插件
Vue.use(Vuex)
//2 创建对象
const store = new Vuex.Store({
//  这里Store第一个首字母是大写
state:{
 count:1000
},
mutations:{

},
actions:{

  },
getters:{

  },
modules:{

  }
})

//3导出store对象
export default store

main.js

import Vue from 'vue'
import App from './App'
import store from "./store";

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
 store,
  //将这个store放在这里才会Vue.prototype.$store = store,在其他组件里通过
  //$store拿到这个store
  render: h => h(App)
})

在这里插入图片描述

Devtools追踪工具，那个组件改了，actions处理一些异步操作，backend后端，frontend前端·

devtools和mutations

app.vue

<template>
  <div id="app">
<h2>{{message}}</h2>
    <h2>{{$store.state.count}}</h2>
<!--    <button @click="$store.state.count++">+</button>-->
<!--    <button @click="$store.state.count&#45;&#45;">-</button>-->
<!--    这样虽然也能改,但是在后续开发中会有一些问题,建议按照规定好的格式来修改-->
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>

    <hello-vuex/>
  </div>
</template>

<script>
import HelloVuex from "../src/components/HelloVuex";
export default {
  name: 'App',
  components:{
    HelloVuex
  },
 data(){
    return {
      message:'我是app组件',
    }
 },
  methods:{
    addition(){
      this.$store.commit('increment')
    },
    subtraction(){
      this.$store.commit('decrement')
    }
  }
}
</script>

<style>

</style>

index.js

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

//1 安装插件
Vue.use(Vuex)
//2 创建对象
const store = new Vuex.Store({
//  这里Store第一个首字母是大写
state:{
 count:1000
},
mutations:{
//方法,至少通过这个修改,如果有一些异步的话,通过actions
  increment(state){
    state.count++;
  //  这里默认有一个state参数
  },
  decrement(state){
    state.count--;
  }
},
actions:{

  },
getters:{

  },
modules:{

  }
})

//3导出store对象
export default store

在这里插入图片描述

vuex-state单一状态树的理解

在这里插入图片描述

vuex-getters使用详情

-当我们state里面有一些数据，这些数据经过变化之后才传给其他地方，使用getters,在其他地方通过$store.getters.......
index.js

getters:{
  powerCounter(state){
    //这里也有一个默认的参数state
    return state.count*state.count
  }
  },

app.vue引用

正常显示

 <h2>----------app:getters相关内容-----</h2>
    <h2>{{$store.getters.powerCounter}}</h2>
<!--    //powerCounter按照属性的方法使用，不用加小括号-->

获取大于20岁的

state:{
 count:1000,
  students:[
    {id:110,name:'haha',age:18},
    {id:111,name:'xing',age:23},
    {id:112,name:'yili',age:25}
  ]
},

我们按照原来的方法可以利用计算属性

 <h2>{{more20stu}}</h2>
    </div>
    </template>

    <script>
      import HelloVuex from "../src/components/HelloVuex";
      export default {
        name: 'App',
        components:{
          HelloVuex
        },
        data(){
          return {
            message:'我是app组件',
          }
        },
        computed:{
          more20stu(){
            return this.$store.state.students.filter(s => {
              return s.age >= 20
              //  返回值是一个布尔值，返回为true的时候，会将我们的值加到s里
              //  false的话会忽略掉，后面那个也可以写成s => s.age >= 20
            })
          }
        },

这样写的话在另一个组件里面想用的话，还得再写一遍，用下面这种方法，写在getters

getters:{
  powerCounter(state){
    //这里也有一个默认的参数state
    return state.count*state.count
  },
  more20stu(state) {
    return state.students.filter(s => {
      return s.age >= 20
    })
  }
},

这样引用

   <h2>{{$store.getters.more20stu}}</h2>

拿到长度

 <h2>{{$store.getters.more20stu}}</h2>
    <h2>{{$store.getters.more20stu.length}}</h2>
    <h2>{{$store.getters.more20stulength}}</h2>

getters:{
  powerCounter(state){
    //这里也有一个默认的参数state
    return state.count*state.count
  },
  more20stu(state) {
    return state.students.filter(s => {
      return s.age >= 20
    })
  },
  more20stulength(state,getters){
    return getters.more20stu.length
  }
  //这里可以传递两个参数，将getters传进来，我们可以通过它拿到里面的其他方法
},

如果想要传参，使用下面方法，即返回一个函数，案例，打印传过来的年龄

 more20stulength(state,getters){
    return getters.more20stu.length
  },
  MoreAgeStu(state){
  // return function (age) {
  //  return state.students.filter(s => s.age > age)
  // }
  //这两种方法任选一种
  return age => {return state.students.filter(s => s.age >age)}
  }
},

vuex-mutations的携带参数

在这里插入图片描述

提交commit时候还想传入一个参数

app.vue

 <button @click="addCount(5)">+5</button>
    <button  @click="addCount(10)">+10</button>

       methods:{
          addition(){
      this.$store.commit('increment')
    },
    subtraction(){
      this.$store.commit('decrement')
    },
          addCount(count){
            this.$store.commit('incrementcount',count)
          }
          //这里接收参数的话在后面接收一下

index.js

mutations:{
//方法,至少通过这个修改,如果有一些异步的话,通过actions
  increment(state){
    state.count++;
  //  这里默认有一个state参数
  },
  decrement(state){
    state.count--;
  },
  incrementcount(state,count){
    state.count += count
  }
},

提交commit的时候想传入多个参数，这时候我们需要使用一个对象

app.vue

<button @click="addstudent"> 添加学生</button>

    methods:{
          addstudent(){
            const stu ={id:114,name:'ming',age:89}
            this.$store.commit('addstudent',stu)
          }
}

index.js

mutations:{
  addstudent(state,stu){
    state.students.push(stu)
  }
}

vuex-mutations的提交风格

在这里插入图片描述

app.vue

  <button @click="addCount(5)">+5</button>
    <button  @click="addCount(10)">+10</button>


   methods:{
          addCount(count){
            //1.普通的提交风格
            // this.$store.commit('incrementcount',count)
          //  2.特殊的提交风格，以对象提交
            this.$store.commit({
              type:'incrementcount',
              count
            })

index.js

mutations:{
  incrementcount(state,count){
    // state.count += count
    //其实这里的count叫做payload更合适，只是一个名字，现在count是一个对象
    state.count += count.count
  },

vuex-数据的响应式原理

在这里插入图片描述

// 直接修改，响应式
   state.info.name = 'hahah'

在这里插入图片描述

info是一个对象，定义在state里面

 //这样写会在info里加一个属性，但是不会显示在界面上，因为不在我们的响应式系统里
    state.info['address'] = '洛杉矶'
  //  通过该方法也会将这个属性添加到响应式系统里，这里可以传一个字符串或者一个number内型，数组下标，对象和数组对应
    Vue.set(state.info,'address','洛杉矶')
  //  删除，但是该方法做不到响应式
    delete state.info.age
  //  下面可以
    Vue.delete(state.info,'age')

vuex-mutations常量内型

在这里插入图片描述

mutations.types.js

export const INCREMENT = 'increment'

app.vue

 import {
       INCREMENT
     }from './store/mutations.types'

  methods:{
          addition(){
      this.$store.commit(INCREMENT)
    },

index.js

mutations:{
//方法,至少通过这个修改,如果有一些异步的话,通过actions
  [INCREMENT](state){
    state.count++;
  //  这里默认有一个state参数
  },

vuex-actions的使用详情

在这里插入图片描述

index.js

mutations: {
  updateinfo(state){
    state.info.name = 'coder'
    //不能在这里进行异步操作，虽然界面改了，但是监听不到
    // setTimeout(()=>{
    //   state.info.name = 'coder'
    // })
  }
},
actions:{
 aupdateinfo(context){
    setTimeout(() => {
      //这里的context相当于store，但是不能直接修改，不能掠过
      context.commit('updateinfo')
    }, 1000)
  }
  },

app.vue

 <h2>{{$store.state.info}}</h2>
     <button @click="updateinfo">修改信息</button>

 updateinfo(){
            this.$store.dispatch(' aupdateinfo')
          }

想要传参的话

index.js

actions:{
 aupdateinfo(context,payload){
    setTimeout(() => {
      //这里的context相当于store，但是不能直接修改，不能掠过
      context.commit('updateinfo')
      console.log(payload);
    }, 1000)
  }

app.vue

  updateinfo(){
            this.$store.dispatch(' aupdateinfo','我是偏偏')
          }
  }

想告诉已经修改成功了

但是这个方法如果还有其他参数就没得办法

actions:{
 aupdateinfo(context,payload){
    setTimeout(() => {
      //这里的context相当于store，但是不能直接修改，不能掠过
      context.commit('updateinfo')
      // console.log(payload);
      payload()
      //这里调一下
    }, 1000)
  }

methods
updateinfo(){
            this.$store.dispatch(' aupdateinfo',()=>{
              console.log('里面已将完成了');
            })
          }

可以传参数，不够优雅

   updateinfo(){
            this.$store.dispatch(' aupdateinfo',{
              message:'我是携带的信息',
              success:()=>{
                console.log('里面已将完成了');
              }
            }
          }

  console.log(payload.message);
      payload.success()

优雅，利用promise

actions:{
 aupdateinfo(context,payload){
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        context.commit('updateinfo')
        console.log(payload);
        resolve('111')
      }, 1000)
    })
  }
  },

dispath这个东西调完之后会返回一个promise，我们可以拿到那个promise进行使用

updateinfo(){
            this.$store
              .dispatch(' aupdateinfo','我是携带的信息')
            .then(res => {
              console.log('里面完成了提交');
              console.log(res);
            })
            }

vuex-modules的使用详情

在模块里getters可以有三个参数，第三个是根
在模块里的commit只会调自己模块里的mutations

在这里插入图片描述

store文件夹的目录组织

在这里插入图片描述

content那里是对象的结构

//对象的结构
const obj = {
  name:'why',
  age:10,
  height:1.88
  address:'洛杉矶'
}
const {name,height,age} = obj;
//这里赋值的顺序的可以不对，是按照名称进行赋值的，可以挑选几个出来

将各个部分抽出去，抽成一个对象export defalut{}js文件,然后再import default...from...导入，模块抽成一个文件夹，因为模块比较多

在这里插入图片描述

网络请求模块的选择-axios

在这里插入图片描述

axios框架的基本使用

在这里插入图片描述

首先要安装这个框架npm install axios --save
main.js

 import axios from "axios"
 
 
axios({
  url:'http://123.207.32.32:8000/home/multidata',
  method:'post'
}).then(res => {
  console.log(res);
})
//默认是get请求，想要是post请求的话，就在这里写上一个
//method：post

//这样写也可以
axios.get()
axios.post()

参数问题
在这里插入图片描述

axios发送并发请求

在这里插入图片描述

如果我们想要拿到里面的一个时，我们可能要按照数组的方式来

在这里插入图片描述
axios里面有一个方法可以进行直接延展

数组的解构

axios配置信息相关

在这里插入图片描述

axios实例和模块封装

实例

在这里插入图片描述

上面的这种在拼接的时候会都是一样的，如果不想要一样的创建实例

在这里插入图片描述

后面还可以创建多个实例

当组件创建时发送请求

下面这种方式的话对第三方框架依赖性太强，不利于维护

在这里插入图片描述
封装

第一种
第二种
第三四种

axios的拦截器的使用

在这里插入图片描述

081&33

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 6

文件路径的引用问题–起别名webpack.base.conf.js alias: { '@': resolve('src'), 'assets':resolve('@/assets'), //这种写法在脚手架二里面不行 'assets':resolve(src/assets'), 'components':resolve('src/components'), 'views':resolve('src/views'),
复制链接

扫一扫

专栏目录