Vue进阶：Vue中的ajax请求

一、Vue中的ajax请求

1.1 解决开发环境 Ajax 跨域问题

总结：在这里插入图片描述

1.1.1 模拟跨域问题

准备好测试的服务器
server1.js

const express = require('express')
const app = express()app.use((request,response,next)=>{console.log('有人请求服务器1了');// console.log('请求来自于',request.get('Host'));// console.log('请求的地址',request.url);next()
})app.get('/students',(request,response)=>{const students = [{id:'001',name:'tom',age:18},{id:'002',name:'jerry',age:19},{id:'003',name:'tony',age:120},]response.send(students)
})app.listen(5000,(err)=>{if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})

server2.js

const express = require('express')
const app = express()app.use((request,response,next)=>{console.log('有人请求服务器2了');next()
})app.get('/cars',(request,response)=>{const cars = [{id:'001',name:'奔驰',price:199},{id:'002',name:'马自达',price:109},{id:'003',name:'捷达',price:120},]response.send(cars)
})app.listen(5001,(err)=>{if(!err) console.log('服务器2启动成功了,请求汽车信息地址为：http://localhost:5001/cars');
})

准备访问5000服务器 存在跨域问题
在这里插入图片描述

安装插件/第三方库 axios 以发送请求

  • npm i axios
  • 引入 import axios from ‘axios’

app.vue

<template><div><button @click="getStudents">获取学生信息</button></div>
</template><script>import axios from 'axios'export default {name:'App',methods: {getStudents(){axios.get('http://localhost:5000/students').then(// 成功response => {console.log('请求成功了',response.data)},// 失败error => {console.log('请求失败了',error.message)})}},}
</script>

在这里插入图片描述

1.1.2 解决跨域
  • cors 不用前端人员做任何的事情
    • 写服务器（后端人员）的人，在服务器里面，给你返回响应的时候，加几个特殊的响应头
  • 不是随便的配置的，造成的后果，任何人都可以找你这台服务器要数据
  • jsonp 开发时使用微乎其微
    • 借助了 srcipt 便签里面 src 属性 不受同源策略限制
    • 前端人员需要写特殊的写法，后端人员也需要配合你，并且只能解决 get请求
  • 代理服务器
    • 和所处的位置(前端)是一样的，协议名、主机名、端口号都保持一致
    • 服务器和服务器之间传递不用ajax，使用的是传统的http请求
      • nginx 代理服务器
      • vue-cli 开启一个代理服务器

代理服务器原理：
开一台跟本地服务器端口相同的服务器，由它去获取端口5000的数据
在这里插入图片描述

配置代理方式一：

  • 代理服务器不是所有的请求，都转发给5000(不能灵活的配置走不走代理)
    • 代理服务器本事就有的数据，就不转发给5000
  • 不能配置多个代理

vue.config.js

 // 开启代理服务器devServer: {proxy: 'http://localhost:5000'},

app.vue 端口改成本地服务器

<template><div><button @click="getStudents">获取学生信息</button></div>
</template><script>import axios from 'axios'export default {name:'App',methods: {getStudents(){axios.get('http://localhost:8080/students').then(// 成功response => {console.log('请求成功了',response.data)},// 失败error => {console.log('请求失败了',error.message)})}},}
</script>

配置代理方式二：

vue.config.js

	devServer: {proxy: {'/atguigu': { // 请求前缀target: 'http://localhost:5000', // 请求地址pathRewrite:{'^/atguigu':''}, // 重写路径 key-value  key正则的匹配条件 把以atguigu 开头的变成 空字符串// ws: true, //用于支持websocket  默认true// changeOrigin: true //用于控制请求头中的host值 默认true},'/demo': {target: 'http://localhost:5001',pathRewrite:{'^/demo':''},// ws: true, //用于支持websocket// changeOrigin: true //用于控制请求头中的host值}}}

app.vue

<template><div><button @click="getStudents">获取学生信息</button><br><button @click="getCars">获取汽车信息</button></div>
</template><script>import axios from 'axios'export default {name:'App',methods: {getStudents(){axios.get('http://localhost:8080/atguigu/students').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)})},getCars(){axios.get('http://localhost:8080/demo/cars').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)})}},}
</script>

二、github用户搜索案例

项目接口： https://api.github.com/search/users?q=xxx

2.1 静态编写

① 基本代码
app.vue

<template><div id="app"><div class="container"><!--头部的搜索--><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search"/>&nbsp;<button>Search</button></div></section><!--List-->     <div class="row"><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div></div></div></div>
</template><script>export default {name:'App',}
</script><style>
.album {
min-height: 50rem; /* Can be removed; just added for demo purposes */
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #f7f7f7;
}.card {
float: left;
width: 33.333%;
padding: .75rem;
margin-bottom: 2rem;
border: 1px solid #efefef;
text-align: center;
}.card > img {
margin-bottom: .75rem;
border-radius: 100px;
}.card-text {
font-size: 85%;
}
</style>

把bootstop的样式引入

  • 方式一：src下创建文件夹assets（静态资源）/css 把 bootstrap.css 存在里面
    引入：
    ① main.js 中引入 不推荐
    里面用到了第三方的样式，这些资源还不去使用，目前不用，不推荐assets方式
    ② 根组件app.vue引入 import ‘./assets/css/bootstrao.css’
    此方式，脚手架会做一个非常严格的检查，有引入不存在的资源就会报错，没有使用也不可以
  • 方式二：在public下建立一个css文件夹 把 bootstrap 放入里面，在index.html页面中引入
    相对路径
    index.html
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico">//引入第三方库<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

② 拆组件
app.vue
样式都是控制列表区的

<template><div class="container"><Search/><List/></div>
</template><script>import Search from './components/Search'import List from './components/List'export default {name:'App',components:{Search,List}}
</script>

List.vue

<template><!--List-->     <div class="row"><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div><div class="card"><a href="https://github.com/xxxxxx" target="_blank"><img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/></a><p class="card-text">xxxxxx</p></div></div>
</template><script>export default {name:'List'}
</script><style scoped>.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card > img {margin-bottom: .75rem;border-radius: 100px;}.card-text {font-size: 85%;}
</style>

Search.vue
使用的是 bootstop 中的样式

<template><!--头部的搜索--><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search"/>&nbsp;<button>Search</button></div></section>
</template><script>export default {name:'Search'}
</script>

在这里插入图片描述

2.2 展示动态的数据和交互

Search.vue

  • 获取用户搜索框输入
  • 发送请求
  • 把数据通过全局事件总线的方式传递给list
<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;<button @click="searchUsers">Search</button></div></section>
</template><script>import axios from 'axios'export default {name:'Search',data() {return {keyWord:''}},methods: {searchUsers(){//请求前更新List的数据this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})// 魔板字符串axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功了',response.data)//请求成功后更新List的数据this.$bus.$emit('updateListData',response.data.items)},error => {console.log('请求失败了',error.message)})}},}
</script>

在这里插入图片描述
main.js 安装全局事件总线

//创建vm
new Vue({el:'#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this},
})

List.vue

  • List接收数据 Search 传输数据
  • avatar_url 用户的头像地址 展示
  • html_url 每一个人的github主页 点击时实现跳转
  • login 用户的登录名 展示
<!--替换div中的数据-->
<template><div class="row"><!-- 展示用户列表 --><div class="card" v-for="user in info.users" :key="user.login"><a :href="user.html_url" target="_blank"><img :src="user.avatar_url" style='width: 100px'/></a><p class="card-text">{{user.login}}</p></div></div>
</template>
<script>export default {name:'List',data() {return {users:[]}},mounted() {this.$bus.$on('updateListData',(dataObj)=>{console.log('我是List组件，收到数据：',dataObj)this.dataObj = dataObj // 存数据})},}
</script>>

2.3 完善功能

  • 一上来使用有欢迎词 list组件
  • 搜索没有加载出来时，限制正在加载中 list组件
  • error

List.vue

<template><div class="row"><!-- 展示用户列表 --><div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login"><a :href="user.html_url" target="_blank"><img :src="user.avatar_url" style='width: 100px'/></a><p class="card-text">{{user.login}}</p></div><!-- 展示欢迎词 --><h1 v-show="info.isFirst">欢迎使用！</h1><!-- 展示加载中 --><h1 v-show="info.isLoading">加载中....</h1><!-- 展示错误信息 --><h1 v-show="info.errMsg">{{info.errMsg}}</h1></div>
</template><script>export default {name:'List',data() {return {info:{isFirst:true,  // 是否为初次展示isLoading:false, // 是否处于加载中 errMsg:'',     // 存储错误信息 users:[]}}},mounted() {this.$bus.$on('updateListData',(dataObj)=>{this.info = {...this.info,...dataObj}// 通过字面量的形式去合并对象，重名后面为主})},}
</script>

Search.vue

<script>import axios from 'axios'export default {name:'Search',data() {return {keyWord:''}},methods: {searchUsers(){//请求前更新List的数据this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功了')//请求成功后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})},error => {//请求后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})})}},}
</script>

在这里插入图片描述

2.4 完整代码

App.vue

<template><div class="container"><Search/><List/></div>
</template><script>import Search from './components/Search'import List from './components/List'export default {name:'App',components:{Search,List}}
</script>

List.vue

<template><div class="row"><!-- 展示用户列表 --><div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login"><a :href="user.html_url" target="_blank"><img :src="user.avatar_url" style='width: 100px'/></a><p class="card-text">{{user.login}}</p></div><!-- 展示欢迎词 --><h1 v-show="info.isFirst">欢迎使用！</h1><!-- 展示加载中 --><h1 v-show="info.isLoading">加载中....</h1><!-- 展示错误信息 --><h1 v-show="info.errMsg">{{info.errMsg}}</h1></div>
</template><script>export default {name:'List',data() {return {info:{isFirst:true,  // 是否为初次展示isLoading:false, // 是否处于加载中 errMsg:'',     // 存储错误信息 users:[]}}},mounted() {this.$bus.$on('updateListData',(dataObj)=>{this.info = {...this.info,...dataObj}})},}
</script><style scoped>.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card > img {margin-bottom: .75rem;border-radius: 100px;}.card-text {font-size: 85%;}
</style>

Search.vue

<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;<button @click="searchUsers">Search</button></div></section>
</template><script>import axios from 'axios'export default {name:'Search',data() {return {keyWord:''}},methods: {searchUsers(){//请求前更新List的数据this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功了')//请求成功后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})},error => {//请求后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})})}},}
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false//创建vm
new Vue({el:'#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this},
})

三、vue 项目中常用的 2 个 Ajax 库

axios 强力推荐
通用的 Ajax 请求库, 官方推荐，使用广泛

vue-resource（插件库）
vue 插件库, vue1.x 使用广泛， 官方已不维护。

  • 安装
    npm i vue-resource
  • 引入插件
    import VueResource from ‘vue-resource’
  • 使用插件
    vue.use（VueResource ）
  • vm 和 vc 身上都多了 $http:(…)

Search.vue

//和axios使用完全一致，只是把axios.get换成this.$http.get
<script>export default {methods: {searchUsers(){this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功了')//请求成功后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})},error => {//请求后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})})}},}
</script>

四、Vue插槽solt

总结：
在这里插入图片描述
使用方式：

1. 默认插槽

父组件中：<Category>//在这里面写的东西会自动查到slot里<div>html结构1</div></Category>
子组件中：<template><div><!-- 定义插槽 -->//没东西插就会显示slot里的默认内容<slot>插槽默认内容...</slot></div></template>

2. 具名插槽

父组件中：<Category>//方式一：slot="center"<template slot="center"><div>html结构1</div></template>//方式二：v-slot:footer<template v-slot:footer><div>html结构2</div></template></Category>
子组件中：<template><div><!-- 定义插槽 -->//名字对应插入<slot name="center">插槽默认内容...</slot><slot name="footer">插槽默认内容...</slot></div></template>

3.作用域插槽

  • 理解：数据在组件的自身（子组件），但根据数据生成的结构需要组件的使用者（父组件）来决定。（games数据在Category（子）组件中，但使用数据所遍历出来的结构由App（父）组件决定）

  • 具体代码：

父组件中：<Category>//scope是旧写法，slot-scope是新api<template scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template slot-scope="scopeData"><!-- 生成的是h4标题 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template></Category>
子组件中：<template><div><!-- 通过数据绑定就可以把子组件的数据传到父组件 --><slot :games="games"></slot></div></template><script>export default {name:'Category',props:['title'],//数据在子组件自身data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽']}},}</script>

五、VUEX

原理图：
在这里插入图片描述

5.1 概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

何时使用
​ 多个组件需要共享数据时

5.2 搭建vuex环境

  1. npm i vuex

    • vue3成为默认版本的同时，vuex也更新到了4版本
    • npm i vuex 安装的是vuex4
    • vuex的4版本，只能在vue3中使用
    • vue2中，要用vuex的3版本 npm i vuex@3
    • vue3中，要用vuex的4版本

  2. Vue.use（Vuex）

  3. store 管理
    Actions
    Mutations
    State

  4. vc 看的见 store

创建store两种方式：

  1. src下创建个文件夹vuex，创建一个store.js
  2. 文件夹交store 里面有个index.js 官网推荐

index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}//创建并暴露store
export default new Vuex.Store({actions,mutations,state
})

在main.js中创建vm时传入store配置项

......
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store/index'//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:'#app',render: h => h(App),store,beforeCreate() {Vue.prototype.$bus = this}
})

5.3 基本使用

index.js
开发中推荐
actions 中小写
mutations 中大写

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
const actions = {// context 上下文// 如果 Actions 中没有业务逻辑时，可以直接调用Mutations// 此时没有意义，拿过来就转发/*jia(context,value){console.log('actions中的jia被调用了')context.commit('JIA',value)},jian(context,value){console.log('actions中的jian被调用了')context.commit('JIAN',value)},*/jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(()=>{context.commit('JIA',value)},500)}
}
//准备mutations——用于操作数据（state）
const mutations = {// 如果 Actions 中没有业务逻辑时，可以直接调用MutationsJIA(state,value){console.log('mutations中的JIA被调用了')state.sum += value},JIAN(state,value){console.log('mutations中的JIAN被调用了')state.sum -= value}
}
//准备state——用于存储数据
const state = {sum:0 //当前的和
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})

Count.vue

<template><div><h1>当前求和为：{{$store.state.sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.commit('JIA',this.n)},decrement(){this.$store.commit('JIAN',this.n)},incrementOdd(){this.$store.dispatch('jiaOdd',this.n)},incrementWait(){this.$store.dispatch('jiaWait',this.n)},},mounted() {console.log('Count',this)},}
</script><style lang="css">button{margin-left: 5px;}
</style>

5.4 多组件共享数据

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
const actions = {/* jia(context,value){console.log('actions中的jia被调用了')context.commit('JIA',value)},jian(context,value){console.log('actions中的jian被调用了')context.commit('JIAN',value)}, */jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(()=>{context.commit('JIA',value)},500)}
}
//准备mutations——用于操作数据（state）
const mutations = {JIA(state,value){console.log('mutations中的JIA被调用了')state.sum += value},JIAN(state,value){console.log('mutations中的JIAN被调用了')state.sum -= value},ADD_PERSON(state,value){console.log('mutations中的ADD_PERSON被调用了')state.personList.unshift(value)}
}
//准备state——用于存储数据
const state = {sum:0, //当前的和school:'尚硅谷',subject:'前端',personList:[{id:'001',name:'张三'}]
}
//准备getters——用于将state中的数据进行加工
const getters = {bigSum(state){return state.sum*10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})

Count.vue

<template><div><h1>当前求和为：{{sum}}</h1><h3>当前求和放大10倍为：{{bigSum}}</h3><h3>我在{{school}}，学习{{subject}}</h3><h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'Count',data() {return {n:1, //用户选择的数字}},computed:{//借助mapState生成计算属性，从state中读取数据。（数组写法）...mapState(['sum','school','subject','personList']),//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）...mapGetters(['bigSum'])},methods: {//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)...mapMutations({increment:'JIA',decrement:'JIAN'}),//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})},mounted() {// const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})// console.log(x)},}
</script><style lang="css">button{margin-left: 5px;}
</style>

Person.vue

<template><div><h1>人员列表</h1><h3 style="color:red">Count组件求和为：{{sum}}</h3><input type="text" placeholder="请输入名字" v-model="name"><button @click="add">添加</button><ul><li v-for="p in personList" :key="p.id">{{p.name}}</li></ul></div>
</template><script>import {nanoid} from 'nanoid'export default {name:'Person',data() {return {name:''}},computed:{personList(){return this.$store.state.personList},sum(){return this.$store.state.sum}},methods: {add(){const personObj = {id:nanoid(),name:this.name}this.$store.commit('ADD_PERSON',personObj)this.name = ''}},}
</script>

5.5 Vuex开发者工具使用

在这里插入图片描述
在这里插入图片描述
问题：
为什么在Actions 中给的是 context(上下文)，明明只需要进行commit操作，为啥不直接给一个commit就可以了

  • 如果给你commint 那么就没有退路可言，只能commint向下操作
  • 但是Actions可以有多个，一个业务逻辑完成不了，通过上下文可以继续向下调用
// 拓展：Actions可以有多个，一个处理不过来jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')console.log('处理了一些事情--jiaOdd')context.dispatch('demo1',value)},demo1(context,value){console.log('处理了一些事情--demo1')context.dispatch('demo2',value)},demo2(context,value){console.log('处理了一些事情--demo2')if(context.state.sum % 2){context.commit('JIA',value)}},

（本文未完结，是整理草稿箱中才发现之前学习的这篇草稿，索性发一下）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/649402.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

P4769 [NOI2018] 冒泡排序 洛谷黑题题解附源码

P4769 [NOI2018] 冒泡排序 洛谷黑题题解附源码

[NOI2018] 冒泡排序 题目背景 请注意&#xff0c;题目中存在 n 0 n0 n0 的数据。 题目描述 最近&#xff0c;小 S 对冒泡排序产生了浓厚的兴趣。为了问题简单&#xff0c;小 S 只研究对 1 1 1 到 n n n 的排列的冒泡排序。 下面是对冒泡排序的算法描述。 输入&#x…
阅读更多...
韦东山嵌入式Liunx入门笔记一

韦东山嵌入式Liunx入门笔记一

文章目录 一、嵌入式Linux二、Ubuntu系统2-1 安装软件2-2 Linux文件(1) 文件架构(2)文件属性(3)文件命令(4) 解压、压缩文件(5) 网络命令 2-3 vi编辑器2-4 Ubuntu下包管理 三、配置网卡四、安装后续学习使用的软件4-1 MobaXterm4-2 FileZilla4-3 Source Insight4.04-4 下载BSP4…
阅读更多...
Open CASCADE学习|圆柱螺旋线绘制原理探究

Open CASCADE学习|圆柱螺旋线绘制原理探究

1、圆柱螺旋线绘制原理 在OCC中&#xff0c;圆柱面的参数方程为&#xff1a; 设P为&#xff08;x0,y0,z0&#xff09;,则 xx0r*cos(u) yy0r*sin(u) zz0v 但u、v之间有关系时&#xff0c;此方程表达为圆柱螺旋线&#xff0c;u、v之间为线性关系时是等螺距螺旋线&#xff0…
阅读更多...
文件上传之秒传功能

文件上传之秒传功能

秒传是一种文件的传输机制&#xff0c;用于在文件已经存在于目标服务器上时&#xff0c;通过校验文件的唯一标识&#xff0c;实现快速而无需从新上传整个文件&#xff0c;它解决了重复上传相同文件的问题&#xff0c;提高了文件传输的效率和节省了带宽资源。 技术阐述&#xff…
阅读更多...
免 费 小程序商城搭建之鸿鹄云商 SAAS云产品概述

免 费 小程序商城搭建之鸿鹄云商 SAAS云产品概述

【SAAS云平台】打造全行业全渠道全场景的SaaS产品&#xff0c;为店铺经营场景提供一体化解决方案&#xff1b;门店经营区域化、网店经营一体化&#xff0c;本地化、全方位、一站式服务&#xff0c;为多门店提供统一运营解决方案&#xff1b;提供丰富多样的营销玩法覆盖所有经营…
阅读更多...
软件测试面试八股文（2024新版）

软件测试面试八股文（2024新版）

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、你的测试职业发展是什么&#xff1f; 测试经验越多&#xff0c;测试能力越高。所以我的职业发…
阅读更多...
【unity实战】实现蓄力丢手榴弹、烟雾弹、燃烧弹的效果

【unity实战】实现蓄力丢手榴弹、烟雾弹、燃烧弹的效果

文章目录 爆炸燃烧烟雾效果资产手榴弹丢手雷烟雾弹、燃烧弹实现手雷每次撞墙弹发出音效&#xff08;补充&#xff09;完结 爆炸燃烧烟雾效果资产 https://assetstore.unity.com/packages/vfx/particles/war-fx-5669 手榴弹 手榴弹配置好刚体&#xff0c;碰撞体 新增脚本Th…
阅读更多...
Qlik Sense : Store With Retry (保存重试机制)

Qlik Sense : Store With Retry (保存重试机制)

Background sometime you cannot store the file directly ,maybe there are another process are reading/storeing the file , so you would need to wait another proecess done and retry . then we come up this solution . 有时您不能直接存储文件&#xff0c;可能还有…
阅读更多...
实验：eNSP AR通过telnet远程登录另外一台AR

实验：eNSP AR通过telnet远程登录另外一台AR

实验2&#xff1a;eNSP AR通过telnet远程登录另外一台AR 基于实验1的基础上来进行&#xff0c;我们通过AR2220登录AR3260 首先设置远程登录密码 1、user-interface vty 0 4 进入用户的虚拟终端 2、设置密码 set authentication password cipher Huawei 这里的意思就是设置密…
阅读更多...
数据结构（C语言版）代码实现（四）——静态单链表的部分代码实现

数据结构（C语言版）代码实现（四）——静态单链表的部分代码实现

目录 参考材料、格式 头文件SLinkList.h 库、宏定义、函数类型声明 线性表的静态单链表存储结构 按值查找 初始化静态链表 分配空间 回收空间 打印已用链表中的元素 求集合(A-B)U(B-A)中的元素&#xff08;重点介绍&#xff09; 调试过程 修改报错与警告 调试 完整…
阅读更多...
找不到msvcp110.dll怎么办，msvcp110.dll丢失修复方法分享

找不到msvcp110.dll怎么办，msvcp110.dll丢失修复方法分享

当计算机系统中无法找到msvcp110.dll这个特定的动态链接库文件时&#xff0c;可能会引发一系列运行问题和功能受限的情况。msvcp110.dll是Microsoft Visual C Redistributable Package的一部分&#xff0c;对于许多基于Windows的应用程序来说&#xff0c;它是至关重要的运行组件…
阅读更多...
vue模拟聊天页面列表：滚动到底部，滚动到顶部触发加载更多

vue模拟聊天页面列表：滚动到底部，滚动到顶部触发加载更多

先看下效果&#xff1a; 代码&#xff1a; <template><div><div style"text-align: center"><button click"scrollTop">滚动到顶部</button><button click"scrollBottom">滚动到底部</button></d…
阅读更多...
Vue深入学习2—虚拟DOM和Diff算法

Vue深入学习2—虚拟DOM和Diff算法

1、snabbdom 是什么&#xff1f; snabbdom是“速度"的意思&#xff0c;源码只有200行&#xff0c;使用TS写的&#xff0c;让东西变得模块化 2、snabbdom 的 h 函数如何工作&#xff1f; h函数用于产生虚拟节点&#xff0c;同时也可以嵌套使用&#xff0c;得到虚拟DOM树&am…
阅读更多...
kuberneters可视化界面-kuboard

kuberneters可视化界面-kuboard

一、kuboard安装 可以选用&#xff0c;docker和docker-commpose kuberneters 安装 kuboard官网 1、 docker安装 sudo docker run -d \--restartunless-stopped \--namekuboard \-p 80:80/tcp \-p 10081:10081/tcp \-e KUBOARD_ENDPOINT"http://192.168.1.10:80" …
阅读更多...
linux的kali安装，换源，更新包

linux的kali安装，换源，更新包

下载kali kali.org进入官网后点第二个 然后点第一个 解压kali 下载后获得.7z压缩包&#xff0c;建议移动到合适自己电脑的位置进行解压&#xff0c;我喜欢放在D盘 启动kali 双击进入解压出的文件夹&#xff0c;将唯一一个.vmx文件用vmware打开&#xff08;没装的自行提前装…
阅读更多...
数据结构奇妙旅程之二叉树题型解法总结

数据结构奇妙旅程之二叉树题型解法总结

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …
阅读更多...
【深度学习】CodeFormer训练过程，如何训练人脸修复模型CodeFormer

【深度学习】CodeFormer训练过程，如何训练人脸修复模型CodeFormer

文章目录 BasicSR介绍环境数据阶段 I - VQGAN阶段 II - CodeFormer (w0)阶段 III - CodeFormer (w1) 代码地址&#xff1a;https://github.com/sczhou/CodeFormer/releases/tag/v0.1.0 论文的一些简略介绍&#xff1a; https://qq742971636.blog.csdn.net/article/details/134…
阅读更多...
链路追踪-调用链跟踪-Jaeger

链路追踪-调用链跟踪-Jaeger

文章目录 一、什么是链路跟踪二、OpenCensusOpenCensus 主要特点OpenTracing标准基本概念Span 三、典型服务端产品什么是OpenTracing?opentracing 使用介绍 四、JaegerJaeger 包含的模块Jaeger-client&#xff08;客户端库&#xff09; 五、Jaeger服务容器化部署过程问题整理 …
阅读更多...
csdn黑色背景用法

csdn黑色背景用法

在edge浏览器下&#xff0c;下载油猴脚本管理器 脚本下载 edge扩展 效果图如下&#xff1a;&#xff1a;&#xff1a;
阅读更多...
[ACM学习] 进制转换

[ACM学习] 进制转换

进制的本质 本质是每一位的数位上的数字乘上这一位的权重 将任意进制转换为十进制 原来还很疑惑为什么从高位开始&#xff0c;原来从高位开始的&#xff0c;可以被滚动地乘很多遍。 将十进制转换为任意进制
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023