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.mzph.cn/news/717285.shtml

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

相关文章

Python光速入门 - Flask轻量级框架

Python光速入门 - Flask轻量级框架

FlASK是一个轻量级的WSGI Web应用程序框架&#xff0c;Flask的核心包括Werkzeug工具箱和Jinja2模板引擎&#xff0c;它没有默认使用的数据库或窗体验证工具&#xff0c;这意味着用户可以根据自己的需求选择不同的数据库和验证工具。Flask的设计理念是保持核心简单&#xff0c…
阅读更多...
布隆过滤器实战

布隆过滤器实战

一、背景 本篇文章以解决实际需求的问题的角度进行切入&#xff0c;探讨了如果使用布隆过滤器快速丢弃无效请求&#xff0c;降低了系统的负载以及不必要的流量。 我们都知道布隆过滤器是以占用内存小&#xff0c;同时也能够实现快速的过滤从而满足我们的需求&#xff0c;本篇…
阅读更多...
Matlab偏微分方程拟合 | 源码分享 | 视频教程

Matlab偏微分方程拟合 | 源码分享 | 视频教程

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《复杂函数拟合案例分享》本专栏旨在提供 1.以案例的形式讲解各类复杂函数拟合的程序实现方法&#xff0c;并提供所有案例完整源码&#xff1b;2.…
阅读更多...
反编译代码格式处理

反编译代码格式处理

反编译代码格式处理 背景解决方案程序跑之后idea格式化 总结 背景 想看看公司里一个工具的代码实现&#xff0c;手里只有一个jar包&#xff0c;只能通过jd-gui反编译代码。但是呢&#xff0c;源码是有了&#xff0c;但是看的很难受。 解决方案 /*** 替换 {code searchDir}中…
阅读更多...
Linux课程四课---Linux开发环境的使用（自动化构建工具-make/Makefile的相关）

Linux课程四课---Linux开发环境的使用（自动化构建工具-make/Makefile的相关）

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…
阅读更多...
用Java语言创建的Spring Boot项目中，如何传递数组呢？？

用Java语言创建的Spring Boot项目中，如何传递数组呢？？

问题&#xff1a; 用Java语言创建的Spring Boot项目中&#xff0c;如何传递数组呢&#xff1f;&#xff1f; 在这个思路中&#xff0c;其实&#xff0c;Java作为一个后端开发的语言&#xff0c;没必要着重于如何传入&#xff0c;我们主要做的便是对传入的数组数据进行处理即可…
阅读更多...
解决虚拟机启动报错：“End kernel panic - not syncing: attempted to kill the idle task”

解决虚拟机启动报错：“End kernel panic - not syncing: attempted to kill the idle task”

原本能正常运行的虚拟机&#xff0c;很长一段时间没用后&#xff0c;今天再次启动&#xff0c;然后就出现下面的问题&#xff1a; 然后走了一些弯路&#xff0c;比如说删除该虚拟机然后新建一个虚拟机&#xff08;问题未解决&#xff09;、直接删除VitualBox重新安装&#xff0…
阅读更多...
快递平台独立版小程序源码|带cps推广营销流量主+前端

快递平台独立版小程序源码|带cps推广营销流量主+前端

源码介绍&#xff1a; 快递代发快递代寄寄件小程序可以对接易达云洋一级总代 快递小程序&#xff0c;接入云洋/易达物流接口&#xff0c;支持选择快递公司&#xff0c;三通一达&#xff0c;极兔&#xff0c;德邦等&#xff0c;功能成熟 如何收益: 1.对接第三方平台成本大约4元…
阅读更多...
00X集——vba获取CAD图中图元类名objectname

00X集——vba获取CAD图中图元类名objectname

在CAD中&#xff0c;通过快捷键PL&#xff08;即POLYLINE命令&#xff09;绘制的线属于AcDbPolyline。AcDbPolyline也被称为LWPOLYLINE&#xff0c;即简单Polyline&#xff0c;它所包含的对象在本身内部。 此外&#xff0c;CAD中还有另一种二维多段线对象&#xff0c;称为AcDb2…
阅读更多...
ViewModel 原理

ViewModel 原理

在现代Android应用开发中&#xff0c;ViewModel是架构组件库的一个关键部分&#xff0c;它在提高应用的稳定性和性能方面发挥着重要作用。在这篇文章中&#xff0c;我们将深入探讨ViewModel的工作原理和最佳实践。 ViewModel简介 ViewModel是Android Jetpack架构组件的一部分…
阅读更多...
ubuntu安裝Avahi发现服务工具

ubuntu安裝Avahi发现服务工具

一、简介 解决设置固定ip后无法连接外网的问题&#xff0c;目前采用动态获取ip&#xff0c;可以不用设置设备的固定IP&#xff0c;直接可以通过域名来访问设备&#xff0c;类似树莓派的连接调试 二、安装 本文使用的是ubuntu23.10.1上安装 1.安装工具 sudo apt install av…
阅读更多...
2.模拟问题——4.日期问题

2.模拟问题——4.日期问题

日期问题难度并不大&#xff0c;但是代码量非常大&#xff0c;需要较高的熟练度&#xff0c;因此需要着重练习&#xff0c;主要涉及数组和循环两个方面的知识点&#xff0c;需要熟练的测试代码。 两个经典题型 闰年 闰年满足以下两个条件的任意一个 能够被400整除不能够被1…
阅读更多...
【Acwing】差分矩阵

【Acwing】差分矩阵

图1&#xff1a;a和b数组映射表 由于a是b的前缀和数组&#xff0c;因此改变b[ x1][ y1]之后&#xff0c;受到影响的a中元素如右半图所示 图2&#xff1a;求b数组的前缀和 #include<bits/stdc.h> using namespace std;int n,m,q; int a[1010][1010]; int b[1010][1010]…
阅读更多...
work 3/1

work 3/1

1>机械臂 #include <head.h> #define SER_POTR 8899 #define SER_IP "192.168.125.223" int main(int argc, const char *argv[]) {//创建套接字int cfdsocket(AF_INET,SOCK_STREAM,0);if(cfd-1){perror("");return -1;}//链接struct sockaddr_i…
阅读更多...
一文搞懂浏览器缓存机制

一文搞懂浏览器缓存机制

文章目录 概述强制缓存协商缓存总结参考文章 概述 浏览器的缓存机制也就是我们说的HTTP缓存机制&#xff0c;其机制是根据HTTP报文的缓存标识进行的 浏览器第一次向服务器发送HTTP请求, 浏览器拿到请求结果后&#xff0c;会根据响应报文的缓存标识&#xff0c;决定是否进行缓存…
阅读更多...
机器学习：数据处理基操

机器学习：数据处理基操

在处理完数据之后&#xff0c;选择好模型&#xff0c;就可以用训练集训练模型&#xff0c;用测试集输入模型 然后输出需要预测的结果啦&#xff5e; 一、模块导入 import numpy as np import pandas as pd #读入数据 二、pandas数据 一、dataframe基础 一、dataframe的创建…
阅读更多...
【代码】Android｜判断asserts下的文件存在与否，以及普通文件存在与否

【代码】Android｜判断asserts下的文件存在与否，以及普通文件存在与否

作者版本&#xff1a;Android 11及以上 主要是发现网上没有完整的、能跑的代码&#xff0c;不知道怎么回事&#xff0c;GPT给我重写的。我只能保证这个代码尊嘟能跑&#xff0c;不像其他的缺胳膊少腿的。 asserts 贴一下结果&#xff1a; boolean isAssertFileExists(String …
阅读更多...
kafka消费者接收不到消息

kafka消费者接收不到消息

背景&#xff1a; 对kafka消息进行监听&#xff0c;生产者发了消息&#xff0c;但是消费端没有接到消息&#xff0c;监听代码 消费端&#xff0c;kafka配置 spring.kafka.bootstrap-serverskafka.cestc.dmp:9591 spring.kafka.properties.sasl.jaas.configorg.apache.kafka.…
阅读更多...
29.HarmonyOS App(JAVA)通知

29.HarmonyOS App(JAVA)通知

普通通知: 通知渠道,弹出消息后&#xff0c;自动消失 长文本通知 //多行文本通知 //图片通知 //社交通知 //媒体通知--经测试&#xff0c;图片无法显示&#xff0c;文字不显示 场景介绍 HarmonyOS提供了通知功能&#xff0c;即在一个应用的UI界面之外显示的消息&#xff0c;主…
阅读更多...
C++之结构体以及通讯录管理系统

C++之结构体以及通讯录管理系统

1&#xff0c;结构体基本概念 结构体属于自定义的数据概念&#xff0c;允许用户存储不同的数据类型 2&#xff0c;结构体的定义和使用 语法&#xff1a;struct 结构体名{ 结构体成员列表}&#xff1b; 通过结构体创建变量的方式有三种&#xff1a; 1&#xff0c;struct …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023