5. Vuex

1. 理解 Vuex

1. 多組件共享數(shù)據(jù)-全局事件總線實(shí)現(xiàn)

紅線是讀，綠線是寫

2. 多組件共享數(shù)據(jù)-vuex實(shí)現(xiàn)

1. 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

1. 概念：專門在 Vue 中實(shí)現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個(gè) Vue 插件，對(duì) vue 應(yīng) 用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫），也是一種組件間通信的方 式，且適用于任意組件間通信。
2. Github 地址: https://github.com/vuejs/vuex

2.什么時(shí)候使用 Vuex

1. 多個(gè)組件依賴于同一狀態(tài)
2. 來(lái)自不同組件的行為需要變更同一狀態(tài)
3. 多個(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)境

1. 創(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
   })

2. 在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
   })

3. 注意事項(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>