Vue3中Vuex状态管理库学习笔记

1.什么是状态管理

在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序的某个位置，对于这些数据的管理我们就称之为状态管理。

在之前我们如何管理自己的状态呢？

  • 在Vue开发中，我们使用组件化的开发方式；
  • 在组件中我们定义data或者在setup中返回使用的数据，这些数据我们称之为state；
  • 在模块template中我们可以使用这些数据，模块最终会被渲染成DOM，我们称之为View；
  • 在模块中我们会产生一些行为事件，处理这些行为事件时，有可能会修改state，这些行为我们称之为actions；

2.Vuex的状态管理

管理不断变化的state本身也是非常困难的：

  • 状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能引起状态的变化；
  • 当应用程序复杂时，state在什么时候，因为什么原因发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪；
    因此，我们是否可以考虑将组件的内部状态抽离出来，以一个全局单例的方式来管理呢？
  • 在这种模式下，我们的组件树构成了一个巨大的 “试图View”；
  • 不管在树的那个位置，任何组件都能获取状态或者触发行为；
  • 通过定义和隔离状态管理中的各个概念，并通过强制性的规则来维护视图和状态间的独立性，我们的代码便会变得更加结构化和易于维护，跟踪；
    这就是Vuex背后的基本思想，它借鉴了Flux，Redux，Elm（纯函数语言，redux有借鉴它的思想）；

当然，目前Vue官网也在推荐使用Pinia进行状态管理，我后续也会进行学习。

3.Vuex的状态管理

在这里插入图片描述

4.Vuex的安装

npm install vuex

5.Vuex的使用

在src目录下新建store目录，store目录下新建index.js,内容如下

import { createStore } from "vuex";const store = createStore({state:() => ({counter:100})
})export default store

在main.js中引用

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'createApp(App).use(store).mount('#app')

App.vue中使用

<template><div class="app"><h2>App当前计数：{{ $store.state.counter }}</h2><HomeCom></HomeCom> </div>
</template><script setup>import HomeCom from './views/HomeCom.vue'
</script><style>
</style>

6.创建Store

每一个Vuex应用的核心就是store（仓库）：

  • store本质上是一个容器，它包含着你的应用中大部分的状态（state);
    Vuex和单纯的全局对象有什么区别呢？
  1. Vuex的状态存储是响应式的
  • 当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会被更新；
  1. 你不能直接改变store中的状态
  • 改变store中的状态的唯一途径就是显示提交（commit）mutation；
  • 这样使得我们可以方便的跟踪每一个状态的变化，从而让我们能够通过一些工具帮助我们更好的管理应用的状态；

使用步骤：

  • 创建Store对象；
  • 在app中通过插件安装；

HomeCom.vue

<template><div><h2>Home当前计数：{{  $store.state.counter }}</h2><button @click="increment">+1</button></div>
</template><script setup>import { useStore } from 'vuex';const store = useStore()function increment(){// store.state.counter++store.commit("increment")}
</script><style scoped></style>

store/index.js

import { createStore } from "vuex";const store = createStore({state:() => ({counter:100}),mutations:{increment(state){state.counter++}}
})export default store

7.在computed中使用Vuex

options-api

<h2>Computed当前计数：{{ storeCounter }}</h2>

<script>export default{computed:{storeCounter(){return this.$store.state.counter}}}
</script>

Componsition-API

 <h2>Componsition-API中Computed当前计数：{{ counter }}</h2>

 const store = useStore()// const setupCounter = store.state.counter; // 不是响应式const { counter } = toRefs(store.state);

8.mapState函数

options-api中使用

    <!-- 普通使用 --><div>name:{{ $store.state.name }}</div><div>level:{{ $store.state.level }}</div><!-- mapState数组方式 --><div>name:{{ name }}</div><div>level:{{ level }}</div><!-- mapState对象方式 --><div>name:{{ sName }}</div><div>level:{{ sLevel }}</div>

<script>import { mapState } from 'vuex';export default {computed:{fullname(){return 'xxx'},...mapState(["name","level"]),...mapState({sName:state => state.name,sLevel:state => state.level})}}
</script>

Componsition-API

  <!-- Setup中  mapState对象方式 --><!-- <div>name:{{ cName }}</div><div>level:{{ cLevel }}</div> --><!-- Setup中 使用useState --><div>name:{{ name }}</div><div>level:{{ level }}</div><button @click="incrementLevel">修改level</button>

<script setup>// import { computed } from 'vue';// import { mapState,useStore } from 'vuex';import { useStore } from 'vuex';
// import useState from '../hooks/useState'
import { toRefs } from 'vue';// 1.一步步完成// const { name,level } = mapState(["name","level"])// const store = useStore()// const cName = computed(name.bind({ $store:store }))// const cLevel = computed(level.bind({ $store:store }))// 2. 使用useState// const { name,level } = useState(["name","level"])// 3.直接对store.state进行结构(推荐)const store = useStore()const { name,level } = toRefs(store.state)function incrementLevel(){store.state.level++}
</script>

hooks/useState.js

import { computed } from "vue";
import { useStore,mapState } from "vuex";export default function useState(mapper){const store = useStore()const stateFnsObj = mapState(mapper)const newState = {}Object.keys(stateFnsObj).forEach(key=>{newState[key] = computed(stateFnsObj[key].bind({$store:store}))})return newState
}

9.getters的基本使用

某些属性可能需要经过变化后来使用，这个时候可以使用getters：

import { createStore } from "vuex";const store = createStore({state:() => ({counter:100,name:'why',level:10,users:[{id:111,name:'why',age:20},{id:112,name:'kobe',age:30},{id:113,name:'james',age:25},]}),mutations:{increment(state){state.counter++}},getters:{doubleCounter(state){return state.counter * 2},totalAge(state){return state.users.reduce((preValue,item)=>{return preValue + item.age},0)},message(state){return `name:${state.name} level:${state.level}`}}
})export default store

获取

<template><div><button @click="incrementLevel">修改level</button><h2>doubleCounter:{{ $store.getters.doubleCounter }}</h2><h2>usertotalAge:{{ $store.getters.totalAge }}</h2><h2>message:{{ $store.getters.message }}</h2></div>
</template><script>export default {}
</script>
<script setup></script><style scoped></style>

注意，getter是可以返回函数的

 // 获取某一个frends，是可以返回函数的getFriendById(state){return (id) => {const friend = state.friends.find(item=>item.id == id)return friend;}}

使用

<h2>friend-111:{{ $store.getters.getFriendById(111) }}</h2>

mapGetters的辅助函数

我们可以使用mapGetters的辅助函数
options api用法

<script>import { mapGetters } from 'vuex';export default {  computed:{// 数组语法// ...mapGetters(["doubleCounter","totalAge","message"]),// 对象语法...mapGetters({doubleCounter:"doubleCounter",totalAge:"totalAge",message:"message"}),...mapGetters(["getFriendById"])}}
</script>

**Composition-API中使用mapGetters **

<script setup>import { toRefs } from 'vue';//  computedimport { useStore } from 'vuex';// mapGettersconst store = useStore();// 方式一
// const { message:messageFn } = mapGetters(["message"])
// const message = computed(messageFn.bind({ $store:store }))
// 方式二
const { message } = toRefs(store.getters)
function changeAge(){store.state.name = "coder why"
}
// 3.针对某一个getters属性使用computed
const message = computed(()=> store.getters.message)
function changeAge(){store.state.name = "coder why"
}
</script>

10. Mutation基本使用

更改Vuex的store中的状态的唯一方法是提交mutation:

mutations:{increment(state){state.counter++},decrement(state){state.counter--}
}

使用示例
store/index.js

import { createStore } from "vuex";const store = createStore({state:() => ({counter:100,name:'why',level:10,users:[{id:111,name:'why',age:20},{id:112,name:'kobe',age:30},{id:113,name:'james',age:25},],friends:[{id:111,name:'why',age:20},{id:112,name:'kobe',age:30},{id:113,name:'james',age:25},]}),getters:{doubleCounter(state){return state.counter * 2},totalAge(state){return state.users.reduce((preValue,item)=>{return preValue + item.age},0)},message(state){return `name:${state.name} level:${state.level}`},// 获取某一个frends，是可以返回函数的getFriendById(state){return (id) => {const friend = state.friends.find(item=>item.id == id)return friend;}}},mutations: {increment(state){state.counter++},changeName(state){state.name = "王小波"},changeLevel(state){state.level++},changeInfo(state,userInfo){state.name = userInfo.name;state.level = userInfo.level}},
})export default store

<template><div><button @click="changeName">修改name</button><h2>Store Name:{{ $store.state.name }}</h2><button @click="changeLevel">修改level</button><h2>Store Level:{{ $store.state.level }}</h2><button @click="changeInfo">修改level和name</button></div>
</template><script>export default {methods:{changeName(){console.log("changeName")// // 不符合规范// this.$store.state.name = "李银河"this.$store.commit("changeName")},changeLevel(){this.$store.commit("changeLevel")},changeInfo(){this.$store.commit("changeInfo",{name:'张三',level:'100'});}}}
</script><style scoped></style>

Mutation常量类型
1.定义常量 store/mutation-type.js

export const CHANGE_INFO = "CHANGE_INFO"

2.定义mutation
引入 store/index.js

import { CHANGE_INFO } from "./mutation_types";

[CHANGE_INFO](state,userInfo){state.name = userInfo.name;state.level = userInfo.level}

3.提交mutation
引入 HomeCom.vue

import {CHANGE_INFO } from "@/store/mutation_types"

changeInfo(){this.$store.commit(CHANGE_INFO,{name:'张三',level:'100'});}

10.mapMutations的使用

  1. 在options-api中
<template><div><button @click="changeName">修改name</button><h2>Store Name:{{ $store.state.name }}</h2><button @click="changeLevel">修改level</button><h2>Store Level:{{ $store.state.level }}</h2><button @click="changeInfo({name:'张三',level:'1999'})">修改level和name</button></div>
</template> <script>import { mapMutations } from "vuex";import {CHANGE_INFO } from "@/store/mutation_types"export default {computed:{},methods:{btnClick(){console.log("btnClick")},...mapMutations(["changeName","changeLevel",CHANGE_INFO])}}
</script> <style scoped></style>
  1. composition-api中
<template><div><button @click="changeName">修改name</button><h2>Store Name:{{ $store.state.name }}</h2><button @click="changeLevel">修改level</button><h2>Store Level:{{ $store.state.level }}</h2><button @click="changeInfo({name:'张三',level:'1999'})">修改level和name</button></div>
</template> <script setup>import { mapMutations,useStore } from 'vuex';import { CHANGE_INFO } from "@/store/mutation_types"const store = useStore();// 1.手动映射和绑定const mutations = mapMutations(["changeName","changeLevel",CHANGE_INFO])const newMutations = {}Object.keys(mutations).forEach(key => {newMutations[key] = mutations[key].bind({$store:store})}) const { changeName,changeLevel,changeInfo } = newMutations
</script><style scoped></style>

mutation重要原则
1.一条重要的原则就是要记住mutation必须是同步函数

  • 这是因为devtool工具会记录mutation的日记
  • 每一条mutation被记录，devtools都需要捕捉到前一状态和后一状态的快照
  • 但是在mutation中执行异步操作，就无法追踪到数据的变化

11. Actions的基本使用

<template><div><h2>当前计数：{{ $store.state.counter }}</h2><button @click="actionBtnClick">发起action</button><h2>当前计数：{{ $store.state.name }}</h2><button @click="actionchangeName">发起action修改name</button></div>
</template> <script>export default {computed:{},methods:{actionBtnClick(){this.$store.dispatch("incrementAction")},actionchangeName(){this.$store.dispatch("changeNameAction","bbb")}}}
</script>
<script setup></script><style scoped></style>

mapActions的使用

componets-api和options-api的使用

<template><div><h2>当前计数：{{ $store.state.counter }}</h2><button @click="incrementAction">发起action</button><h2>当前计数：{{ $store.state.name }}</h2><button @click="changeNameAction('bbbccc')">发起action修改name</button><button @click="increment">increment按钮</button></div>
</template> <!-- <script>import { mapActions } from 'vuex';export default {computed:{},methods:{...mapActions(["incrementAction","changeNameAction"])}}
</script> -->
<script setup>import { useStore,mapActions } from 'vuex';const store = useStore();const actions =  mapActions(["incrementAction","changeNameAction"]);const newActions = {}Object.keys(actions).forEach(key => {newActions[key] = actions[key].bind({$store:store})})const {incrementAction,changeNameAction} = newActions;//  2.使用默认的做法//  import { useStore } from 'vuex';// const store = useStore();// function increment(){//   store.dispatch("incrementAction")// }
</script><style scoped></style>

** actions发起网络请求**

  1. store/index.js文件
import { createStore } from "vuex";
import { CHANGE_INFO } from "./mutation_types";
const store = createStore({state:() => ({counter:100,name:'why',level:10,users:[{id:111,name:'why',age:20},{id:112,name:'kobe',age:30},{id:113,name:'james',age:25},],friends:[{id:111,name:'why',age:20},{id:112,name:'kobe',age:30},{id:113,name:'james',age:25},],// // 服务器数据banners:[],recommends:[]}),getters:{doubleCounter(state){return state.counter * 2},totalAge(state){return state.users.reduce((preValue,item)=>{return preValue + item.age},0)},message(state){return `name:${state.name} level:${state.level}`},// 获取某一个frends，是可以返回函数的getFriendById(state){return (id) => {const friend = state.friends.find(item=>item.id == id)return friend;}}},mutations: {increment(state){state.counter++},changeName(state){state.name = "王小波"},changename(state,name){state.name = name},changeLevel(state){state.level++},// changeInfo(state,userInfo){//   state.name = userInfo.name;//   state.level = userInfo.level// } [CHANGE_INFO](state,userInfo){state.name = userInfo.name;state.level = userInfo.level},changeBanners(state,banners){state.banners = banners},changeRecommends(state,recommends){state.recommends = recommends}},actions:{incrementAction(context){// console.log(context.commit) // 用于提交mutation// console.log(context.getters) // getters// console.log(context.state) // statecontext.commit("increment")},changeNameAction(context,payload){context.commit("changename",payload)},async fetchHomeMultidataAction(context){//   // 1.返回promise，给promise设置then//   // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{//   //   return res.json().then(data=>{//   //     console.log(data)//   //   })//   // })//   // 2.promisel链式调用 //   // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{//   //   return res.json()//   // }).then(data =>{//   //   console.log(data)//   // })// 3.await/async const res = await fetch("http://123.207.32.32:8000/home/multidata")const data = await res.json();console.log(data);// 修改state数据context.commit("changeBanners",data.data.banner.list)context.commit("changeRecommends",data.data.recommend.list)return 'aaaa';//   // return new Promise(async (resolve,reject)=>{//   //   const res = await fetch("http://123.207.32.32:8000/home/multidata")//   //   const data = await res.json();//   //   console.log(data);//   //   // 修改state数据//   //   context.commit("changeBanners",data.data.banner.list)//   //   context.commit("changeRecommends",data.data.recommend.list)//   //   // reject()//   //   resolve("aaaa")//   // })// }}
})export default store
  1. HomeCom.vue
<template><div><h2>Home Page</h2><ul><template v-for="item in $store.state.home.banners" :key="item.acm"><li>{{ item.title }}</li></template></ul></div>
</template> <script setup>import { useStore } from 'vuex';//  进行vuex网络请求const store = useStore()store.dispatch("fetchHomeMultidataAction").then(res=>{console.log("home中的then被回调:",res)})
</script><style scoped></style>

module的基本使用

  1. store/index.js文件
import { createStore } from "vuex";
import { CHANGE_INFO } from "./mutation_types";
import homeModule from './modules/home'
const store = createStore({state:() => ({counter:100,name:'why',level:10,users:[{id:111,name:'why',age:20},{id:112,name:'kobe',age:30},{id:113,name:'james',age:25},],friends:[{id:111,name:'why',age:20},{id:112,name:'kobe',age:30},{id:113,name:'james',age:25},],// // 服务器数据// banners:[],// recommends:[]}),getters:{doubleCounter(state){return state.counter * 2},totalAge(state){return state.users.reduce((preValue,item)=>{return preValue + item.age},0)},message(state){return `name:${state.name} level:${state.level}`},// 获取某一个frends，是可以返回函数的getFriendById(state){return (id) => {const friend = state.friends.find(item=>item.id == id)return friend;}}},mutations: {increment(state){state.counter++},changeName(state){state.name = "王小波"},changename(state,name){state.name = name},changeLevel(state){state.level++},// changeInfo(state,userInfo){//   state.name = userInfo.name;//   state.level = userInfo.level// } [CHANGE_INFO](state,userInfo){state.name = userInfo.name;state.level = userInfo.level},// changeBanners(state,banners){//   state.banners = banners// },// changeRecommends(state,recommends){//   state.recommends = recommends// }},actions:{incrementAction(context){// console.log(context.commit) // 用于提交mutation// console.log(context.getters) // getters// console.log(context.state) // statecontext.commit("increment")},changeNameAction(context,payload){context.commit("changename",payload)},// async fetchHomeMultidataAction(context){//   // 1.返回promise，给promise设置then//   // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{//   //   return res.json().then(data=>{//   //     console.log(data)//   //   })//   // })//   // 2.promisel链式调用 //   // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{//   //   return res.json()//   // }).then(data =>{//   //   console.log(data)//   // })//   // 3.await/async //   const res = await fetch("http://123.207.32.32:8000/home/multidata")//     const data = await res.json();//     console.log(data);//     // 修改state数据//     context.commit("changeBanners",data.data.banner.list)//     context.commit("changeRecommends",data.data.recommend.list)//     return 'aaaa';//   // return new Promise(async (resolve,reject)=>{//   //   const res = await fetch("http://123.207.32.32:8000/home/multidata")//   //   const data = await res.json();//   //   console.log(data);//   //   // 修改state数据//   //   context.commit("changeBanners",data.data.banner.list)//   //   context.commit("changeRecommends",data.data.recommend.list)//   //   // reject()//   //   resolve("aaaa")//   // })// }},modules:{home:homeModule}
})export default store
  1. modules/home.js
export default{state:()=>({// 服务器数据banners:[],recommends:[]}),mutations:{changeBanners(state,banners){state.banners = banners},changeRecommends(state,recommends){state.recommends = recommends}},actions:{async fetchHomeMultidataAction(context){// 1.返回promise，给promise设置then// fetch("http://123.207.32.32:8000/home/multidata").then(res=>{//   return res.json().then(data=>{//     console.log(data)//   })// })// 2.promisel链式调用 // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{//   return res.json()// }).then(data =>{//   console.log(data)// })// 3.await/async const res = await fetch("http://123.207.32.32:8000/home/multidata")const data = await res.json();console.log(data);// 修改state数据context.commit("changeBanners",data.data.banner.list)context.commit("changeRecommends",data.data.recommend.list)return 'aaaa';// return new Promise(async (resolve,reject)=>{//   const res = await fetch("http://123.207.32.32:8000/home/multidata")//   const data = await res.json();//   console.log(data);//   // 修改state数据//   context.commit("changeBanners",data.data.banner.list)//   context.commit("changeRecommends",data.data.recommend.list)//   // reject()//   resolve("aaaa")// })}}
}
  1. HomeCom.vue
<template><div><h2>Home Page</h2><ul><template v-for="item in $store.state.home.banners" :key="item.acm"><li>{{ item.title }}</li></template></ul></div>
</template> <script setup>import { useStore } from 'vuex';//  进行vuex网络请求const store = useStore()store.dispatch("fetchHomeMultidataAction").then(res=>{console.log("home中的then被回调:",res)})
</script><style scoped></style>

Modules-默认模块化

Home.vue

<template><div><h2>Home Page</h2><h2>Counter模块的counter：{{ $store.state.counter.count }}</h2><h2>Counter模块的doubleCounter：{{ $store.getters.doubleCount }}</h2><button @click="incrementCount">count模块+1</button></div>
</template> <script setup>import { useStore } from 'vuex';//  进行vuex网络请求const store = useStore()function incrementCount(){store.dispatch("incrementCountAction")}
</script><style scoped></style>

store/index.js文件

const counter = {namespaced:true,state:() =>({count:99}),mutations:{incrementCount(state){state.count++}},getters:{doubleCount(state,getters,rootState){return state.count + rootState.rootCounter}},actions:{incrementCountAction(context){context.commit("incrementCount")}}
}export default counter

修改模块子的值

HomeCom.vue

<template><div><h2>Home Page</h2><h2>Counter模块的counter：{{ $store.state.counter.count }}</h2><h2>Counter模块的doubleCounter：{{ $store.getters["counter/doubleCount"] }}</h2><button @click="incrementCount">count模块+1</button></div>
</template> <script setup>import { useStore } from 'vuex';//  进行vuex网络请求const store = useStore()function incrementCount(){store.dispatch("counter/incrementCountAction")}// module修改或派发根组件// 如果我们希望在action中修改root中的state，那么有如下方式// changeNameAction({commit,dispatch,state,rootState,getters,rootGetters}){//   commit("changeName","kobe");//   commit("changeNameRootName",null,{root:true});//   dispatch("changeRootNameAction",null,{root:true});// }
</script><style scoped></style>

感谢观看，我们下次见

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

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

相关文章

Linux设备模型(十一) - platform设备

Linux设备模型(十一) - platform设备

一&#xff0c;platform device概述 在Linux2.6以后的设备驱动模型中&#xff0c;需关心总线、设备和驱动这3个实体&#xff0c;总线将设备和驱动绑定。在系统每注册一个设备的时候&#xff0c; 会寻找与之匹配的驱动&#xff1b;相反的&#xff0c;在系统每注册一个设备的时…
阅读更多...
浅显易懂：WinForms、WPF和Electron的区别和优缺点

浅显易懂：WinForms、WPF和Electron的区别和优缺点

在开发桌面应用的时候&#xff0c;WinForms、WPF和Electron是绕不过去的三个技术栈&#xff0c;本文就详细据介绍了三者的区别和优缺点&#xff0c;帮助老铁们做个抉择。 一、winform wpf Electron 三者区别 WinForms、WPF和Electron是三种不同的框架和技术&#xff0c;用于开…
阅读更多...
alfred自定义脚本执行报错,alfred task launch path not accessible问题解决

alfred自定义脚本执行报错,alfred task launch path not accessible问题解决

alfred自定义脚本执行报错,alfred task launch path not accessible 原因是mac升级后 /usr/lib/php 已经不存在了,可以改由zsh方式执行,如下图 右击打开目录 将执行脚本放入目录 code如下: <?phprequire ./Util.php; $qs $argv; $query $qs[1]; date_default_timezon…
阅读更多...
#QT（智能家居界面-布局）

#QT（智能家居界面-布局）

1.IDE&#xff1a;QTCreator 2.实验&#xff1a; 水平布局&#xff0c;垂直布局&#xff0c;栅格布局&#xff08;弹簧&#xff09; 界面自动调整 3.记录 注意弹簧不是拖拽拉长&#xff0c;而是使用栅格布局 运行发现窗口放大缩小可以自动调整 如果想要重新布局&#xff0c;需…
阅读更多...
做外贸的你是否已经习惯了习惯？

做外贸的你是否已经习惯了习惯？

不管是好的习惯还是坏的习惯&#xff0c;一旦我们坚持下去&#xff0c;那么在之后的日子里就会形成一种自然反应&#xff0c;如果不那样做&#xff0c;就会觉得可能哪里有点不对劲或者生活缺了点啥。 就像贾玲的一次访谈的时候说到的&#xff0c;以前回到家就想躺下不动&#…
阅读更多...
使用easyexcel填充模板数据，并导出excel

使用easyexcel填充模板数据，并导出excel

文章目录 前言一、制作模板二、前端代码三、后端代码总结 前言 导出excel功能非常场景&#xff0c;本片文章记录如何使用模板填充数据后再导出。因直接导出excel数据样式不符合要求&#xff0c;所以做了模板填充然后再导出excel。 效果如下&#xff1a; 一、制作模板 注意&a…
阅读更多...
科普【1】：web3.0初探，不懂技术也能看懂。

科普【1】：web3.0初探，不懂技术也能看懂。

Hi&#xff0c;我是贝格前端工场&#xff0c;本期来科普一下web3这个概念&#xff0c;力争讲的浅显易懂。 一、什么是web3及其特征 Web3是指第三代互联网&#xff0c;也被称为分布式互联网或区块链互联网。它是对传统互联网的一种进化和扩展&#xff0c;旨在提供更加去中心化、…
阅读更多...
【归并排序】 详细解析 动图演示 逐图解析 洛谷P1177【模板】排序 sort【快速排序】

【归并排序】 详细解析 动图演示 逐图解析 洛谷P1177【模板】排序 sort【快速排序】

文章目录 归并排序1.归并排序的复杂度分析2.细节解释3.归并排序动图演示3(1) 我们的拆分过程如下↓ 4.code↓ 洛谷P1177【模板】排序数据规模与约定code&#xff08;归并排序&#xff09;↓code&#xff08;sort排序【快速排序】&#xff09; 完结撒花(&#xffe3;▽&#xff…
阅读更多...
简析：老阳蓝海项目怎么做才能赚钱？

简析：老阳蓝海项目怎么做才能赚钱？

在互联网的浪潮中&#xff0c;新的商业模式和项目层出不穷&#xff0c;其中&#xff0c;老阳蓝海项目因其独特的市场定位和创新模式&#xff0c;吸引了许多人的关注。但是&#xff0c;如何在老阳蓝海项目中实现盈利&#xff0c;却是一个需要深入探讨的问题。 首先&#xff0c;要…
阅读更多...
CorelDRAW2024中文免费版功能强大的矢量图形设计软件

CorelDRAW2024中文免费版功能强大的矢量图形设计软件

CorelDRAW 2024是一款功能强大的矢量图形设计软件&#xff0c;广泛应用于广告制作、包装设计、插画设计、服装设计、网页设计等多个领域。以下是对其功能的详细介绍&#xff1a; 矢量图形设计&#xff1a;CorelDRAW 2024提供了全面的矢量图形设计功能&#xff0c;包括绘制基本…
阅读更多...
hnust 湖南科技大学 2023 综合实训3（软件工程）课设 完整代码及数据库+报告+uml等图源文件+指导书

hnust 湖南科技大学 2023 综合实训3（软件工程）课设 完整代码及数据库+报告+uml等图源文件+指导书

hnust 湖南科技大学 2023 综合实训3&#xff08;软件工程&#xff09;课设 完整代码及数据库报告uml等图源文件指导书 介绍 老师考核等级为优&#xff0c;系统多次测试&#xff0c;未发现bug 项目前后端分离&#xff0c;前端vue2工程项目&#xff0c;后端springboot&#xff…
阅读更多...
10万㎡！天府新区又一重大成都直播产业园正在投用

10万㎡！天府新区又一重大成都直播产业园正在投用

天府新区&#xff0c;作为成都乃至整个四川省的新经济增长极&#xff0c;正以其独特的魅力和强大的发展势头吸引着世界的目光。今天&#xff0c;我们有幸在这里见证一个崭新的里程碑——10万㎡的成都直播产业园&#xff1a;天府锋巢直播产业基地 正式投入使用。这不仅是对天府新…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023