昆明網(wǎng)站建設(shè)服務(wù)html網(wǎng)頁(yè)制作app
5. Vuex
1. 理解 Vuex
1. 多組件共享數(shù)據(jù)-全局事件總線實(shí)現(xiàn)
紅線是讀,綠線是寫
2. 多組件共享數(shù)據(jù)-vuex實(shí)現(xiàn)
- vuex 不屬于任何組件
3. 求和案例-純vue版
核心代碼
1.Count.vue
<template><div><h1>當(dāng)前求和為:{{ 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">當(dāng)前求和為奇數(shù)再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>
export default {name: "Count",data() {return {n: 1, // 用戶選擇的數(shù)據(jù)sum: 0, // 當(dāng)前的和};},methods: {increment() {this.sum += this.n;},decrement() {this.sum -= this.n;},incrementOdd() {if (this.sum % 2) {this.sum += this.n;}},incrementWait() {setTimeout(() => {this.sum += this.n;}, 500);},},
};
</script>
<style scoped>
button {margin-left: 5px;
}
</style>
2.App.vue
<template><div><count /></div>
</template>
<script>
import Count from "./components/Count.vue";
export default {components: { Count },name: "App",
};
</script>
<style scoped>
.container,
.foot {display: flex;justify-content: space-around;
}
h4 {text-align: center;
}
</style>
1. 什么是 Vuex
- 概念:專門在 Vue 中實(shí)現(xiàn)集中式狀態(tài)(數(shù)據(jù))管理的一個(gè) Vue 插件,對(duì) vue 應(yīng) 用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理(讀/寫),也是一種組件間通信的方 式,且適用于任意組件間通信。
- Github 地址: https://github.com/vuejs/vuex
2.什么時(shí)候使用 Vuex
- 多個(gè)組件依賴于同一狀態(tài)
- 來(lái)自不同組件的行為需要變更同一狀態(tài)
- 多個(gè)組件需要共享數(shù)據(jù)時(shí)
3. Vuex 工作原理圖
如果dispatch知道怎么操作,并且知道具體數(shù)值時(shí),可以直接省略actions直接commit
注意:在2022年2月7日,vue3成為了默認(rèn)版本,所以說(shuō) npm i vue,安裝的直接就是vue3了,并且vue3成為默認(rèn)版本的同時(shí),vuex也更新到了4版本,所以我們現(xiàn)在執(zhí)行npm i vuex,安裝的是vuex4,但vuex的4版本,只能在vue3中使用,如果安裝就會(huì)出現(xiàn)下圖的報(bào)錯(cuò)
vue2中,要用vuex的3版本vue3中,要用vuex的4版本
4. 搭建vuex環(huán)境
-
創(chuàng)建文件:
src/store/index.js
//引入Vue核心庫(kù) import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //應(yīng)用Vuex插件 Vue.use(Vuex)//準(zhǔn)備actions對(duì)象——響應(yīng)組件中用戶的動(dòng)作 const actions = {} //準(zhǔn)備mutations對(duì)象——修改state中的數(shù)據(jù) const mutations = {} //準(zhǔn)備state對(duì)象——保存具體的數(shù)據(jù) const state = {}//創(chuàng)建并暴露store export default new Vuex.Store({actions,mutations,state })
-
在
main.js
中創(chuàng)建vm時(shí)傳入store
配置項(xiàng)...... //引入store import store from './store' ......//創(chuàng)建vm new Vue({el:'#app',render: h => h(App),store })
-
注意事項(xiàng):
import str1 from "./test1"; console.log(100) console.log(200) import str2 from "./test2"; // 原因:在腳手架里寫 import 的時(shí)候,會(huì)掃描全局,不管放在哪里,中間有多少數(shù)據(jù),按照你編寫代碼的順序,都會(huì)匯總到最上方,挨個(gè)執(zhí)行
test1.js
console.log('test1') const str1 = 'test1' export default str1
test2.js
console.log('test2') const str2 = 'test2' export default str2
5.求和案例改造成vuex
核心代碼
1. Count.vue
<template><div><h1>當(dāng)前求和為:{{ $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">當(dāng)前求和為奇數(shù)再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>
export default {name: "Count",data() {return {n: 1, // 用戶選擇的數(shù)據(jù)};},mounted() {},methods: {increment() {// this.$store.dispatch("jia", this.n);this.$store.commit("JIA", this.n);},decrement() {// this.$store.dispatch("jian", this.n);this.$store.commit("JIAN", this.n);},incrementOdd() {// if (this.$store.state.sum % 2) {this.$store.dispatch("jiaOdd", this.n);// }},incrementWait() {// setTimeout(() => {this.$store.dispatch("jiaWait", this.n);// }, 500);},},
};
</script>
<style scoped>
button {margin-left: 5px;
}
</style>
2. App.vue
<template><div><count /></div>
</template>
<script>
import Count from "./components/Count.vue";
export default {components: { Count },name: "App",mounted() {// console.log("App", this);},
};
</script>
<style scoped>
.container,
.foot {display: flex;justify-content: space-around;
}
h4 {text-align: center;
}
</style>
3. store/index.js
// 該文件用于創(chuàng)建Vuex中最為核心的store
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)// 準(zhǔn)備actions——用于相應(yīng)組件中的動(dòng)作
const actions = {// jia(context, value) {// console.log('actions中的jia被調(diào)用了', context, value);// context.commit('JIA', value)// },// jian(context, value) {// console.log('actions中的jian被調(diào)用了', context, value);// context.commit('JIAN', value)// },jiaOdd(context, value) {console.log('actions中的jiaOdd被調(diào)用了', context, value);if (context.state.sum % 2) {context.commit('JIA', value)}},jiaWait(context, value) {console.log('actions中的jiaWait被調(diào)用了', context, value);setTimeout(() => {context.commit('JIA', value)}, 500);},
}
// 準(zhǔn)備 mutations——用于操作數(shù)據(jù)(state)
const mutations = {JIA(state, value) {console.log('mutations中的JIA被調(diào)用了', state, value);state.sum += value},JIAN(state, value) {console.log('mutations中的JIAN被調(diào)用了', state, value);state.sum -= value}
}
// 準(zhǔn)備 state——用于儲(chǔ)存數(shù)據(jù)
const state = {sum: 0, // 當(dāng)前的和
}// 創(chuàng)建并暴露store
export default new Vuex.Store({actions,mutations,state
})
4. main.js
<template><div><count /></div>
</template>
<script>
import Count from "./components/Count.vue";
export default {components: { Count },name: "App",mounted() {// console.log("App", this);},
};
</script>
<style scoped>
.container,
.foot {display: flex;justify-content: space-around;
}
h4 {text-align: center;
}
</style>