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.pswp.cn/news/717285.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/717285.shtml
英文地址，請注明出處：http://en.pswp.cn/news/717285.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

大廠面試經驗：如何對加密后的數據進行模糊查詢操作

大廠面試經驗：如何對加密后的數據進行模糊查詢操作

加密后的數據對模糊查詢不是很友好&#xff0c;本篇就針對加密數據模糊查詢這個問題來展開講一講實現的思路。 為了數據安全我們在開發過程中經常會對重要的數據進行加密存儲&#xff0c;常見的有&#xff1a;密碼、手機號、電話號碼、詳細地址、銀行卡號、信用卡驗證碼等信息…
閱讀更多...
YoloV5改進策略：主干網絡改進|MogaNet——高效的多階門控聚合網絡

YoloV5改進策略：主干網絡改進|MogaNet——高效的多階門控聚合網絡

文章目錄 摘要論文：《MogaNet——高效的多階門控聚合網絡》1、簡介2、相關工作2.1、視覺Transformers2.2、ViT時代的卷積網絡3、從多階博弈論交互的角度看表示瓶頸4、方法論4.1、MogaNet概述4.2、多階門控聚合4.3、通過通道聚合進行多階特征重新分配4.4、實現細節5、實驗5.1、…
閱讀更多...
Vue 3 中的 setup 函數是如何工作的？

Vue 3 中的 setup 函數是如何工作的？

Vue 3 中的 setup 函數是一個新的組件選項&#xff0c;用于使用組合式 API 定義組件的邏輯。這個函數的引入是為了解決 Vue 2 中隨著組件復雜度的增長&#xff0c;選項式的 API 可能導致代碼難以維護和理解的問題。通過 setup 函數&#xff0c;開發者可以更加靈活地組織和共享代…
閱讀更多...
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}中…
閱讀更多...
LeetCode 100231.超過閾值的最少操作數 I

LeetCode 100231.超過閾值的最少操作數 I

給你一個下標從 0 開始的整數數組 nums 和一個整數 k 。 一次操作中&#xff0c;你可以刪除 nums 中的最小元素。 你需要使數組中的所有元素都大于或等于 k &#xff0c;請你返回需要的 最少 操作次數。 示例 1&#xff1a; 輸入&#xff1a;nums [2,11,10,1,3], k 10 輸…
閱讀更多...
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…
閱讀更多...
感染了后綴為.faust勒索病毒如何應對？數據能夠恢復嗎？

感染了后綴為.faust勒索病毒如何應對？數據能夠恢復嗎？

導言&#xff1a; 在網絡安全領域&#xff0c;.faust勒索病毒是近期備受關注的一種惡意軟件。這種病毒采用高度復雜的加密算法&#xff0c;將受感染計算機上的文件全部加密&#xff0c;并要求受害者支付贖金以獲取解密密鑰。.faust勒索病毒的攻擊方式通常是通過電子郵件附件、…
閱讀更多...
快遞平臺獨立版小程序源碼|帶cps推廣營銷流量主+前端

快遞平臺獨立版小程序源碼|帶cps推廣營銷流量主+前端

源碼介紹&#xff1a; 快遞代發快遞代寄寄件小程序可以對接易達云洋一級總代 快遞小程序&#xff0c;接入云洋/易達物流接口&#xff0c;支持選擇快遞公司&#xff0c;三通一達&#xff0c;極兔&#xff0c;德邦等&#xff0c;功能成熟 如何收益: 1.對接第三方平臺成本大約4元…
閱讀更多...
Python基本數據類型介紹

Python基本數據類型介紹

Python 解釋 Python是一種高級編程語言&#xff0c;以其簡潔、易讀和易用而聞名。它是一種通用的、解釋型的編程語言&#xff0c;適用于廣泛的應用領域&#xff0c;包括軟件開發、數據分析、人工智能等。python是一種解釋型&#xff0c;面向對象、動態數據類型的高級程序設計…
閱讀更多...
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…
閱讀更多...
MyBatis攔截器實現打印完整SQL語句

MyBatis攔截器實現打印完整SQL語句

我們在執行語句的時候會使用Mybatis自帶的日志打印工具&#xff0c;但是打印的時候參數會用?代替&#xff0c;顯得看起來不是那么直觀&#xff0c;所以通過實現了InnerInterceptor接口&#xff0c;并重寫了beforeQuery和beforeUpdate方法。在這兩個方法中&#xff0c;它會獲取…
閱讀更多...
【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]…
閱讀更多...
最新文章

Copyright @ 2022~2023