【vuex】

vuex

1 理解vuex
- 1.1 vuex是什么
- 1.2 什么時候使用vuex
- 1.3 vuex工作原理圖
- 1.4 搭建vuex環境
- 1.5 求和案例
- - 1.5.1 vue方式
  - 1.5.2 vuex方式
2 vuex核心概念和API
- 2.1 getters配置項
- 2.2 四個map方法的使用
- - 2.2.1 mapState方法
  - 2.2.2 mapGetters方法
  - 2.2.3 mapActions方法
  - 2.2.4 mapMutations方法
  - 2.2.5 求和案例之四個map的使用
- 2.3 多組件共享數據
- 2.4 模塊化＋命名空間

1 理解vuex

1.1 vuex是什么

概念：專門在 Vue 中實現集中式狀態（數據）管理的一個 Vue 插件，對 Vue 應用中多個組件的共享狀態進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。

1.2 什么時候使用vuex

多個組件依賴于同一狀態
來自不同組件的行為需要變更同一狀態

1.3 vuex工作原理圖

在這里插入圖片描述

1.4 搭建vuex環境

npm i vuex

vue2中，要用vuex的3版本
vue3中，要用vuex的4版本

在這里插入圖片描述

Vue.use(Vuex)
創建store
方法一：

方法二(推薦)：
vc ? store

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入插件vue-resource
import vueResource from 'vue-resource'
// 引入store
import store from './store/index'
// 關閉Vue的生產提示
Vue.config.productionTip = false// 使用插件
Vue.use(vueResource)// 創建vm
new Vue({el:'#app',render: h => h(App),// store:store,store,// 安裝全局事件總線beforeCreate(){Vue.prototype.$bus = this}
})

在這里插入圖片描述

// 該文件用于創建Vuex中最為核心的store// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)// 準備actions--用于響應組件中的動作
const actions = {}
// 準備mutations--用于操作數據(state)
const mutations = {}
// 準備state--用于存儲數據
const state = {}// 創建并暴露store
export default new Vuex.Store({/* actions:actions,mutations:mutations,state:state, */// 簡寫為:actions,mutations,state,
})// 暴露(導出)store
// export default store

在這里插入圖片描述

1.5 求和案例

1.5.1 vue方式

App.vue代碼：

<template><div><Count/></div>
</template><script>import Count from './components/Count.vue'export default {name:'App',components:{Count},}
</script>

Count.vue代碼：

<template><div><h1>當前求和為:{{sum}}</h1><!-- 寫法一 --><!-- <select v-model="n"><option :value="1">1</option>加上冒號就是v-bind 雙引號及其內的東西當作js表達式解析,為數字型;如不加冒號,則是字符串型<option :value="2">2</option><option :value="3">3</option></select> --><!-- 寫法二(強制轉換) --><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">當前求和為奇數再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name:'Count',data() {return {n:1, // 用戶選擇的數字sum:0 // 當前的和}},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 lang="css">button {margin-left: 5px;}
</style>

1.5.2 vuex方式

main.js代碼：

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入插件vue-resource
import vueResource from 'vue-resource'
// 引入store
import store from './store/index'
// 關閉Vue的生產提示
Vue.config.productionTip = false// 使用插件
Vue.use(vueResource)// 創建vm
new Vue({el:'#app',render: h => h(App),// store:store,store,// 安裝全局事件總線beforeCreate(){Vue.prototype.$bus = this}
})

index.js代碼：

// 該文件用于創建Vuex中最為核心的store// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)// 準備actions--用于響應組件中的動作
const actions = {// 下列jia和jian沒存在意義 所以可注釋掉// jia:function(){ 簡寫為/* jia(context,value){ // context意思是上下文 把commit放進了context內// console.log('actions中的jia被調用了',context,value);context.commit('JIA',value)},jian(context,value){// console.log('actions中的jian被調用了',context,value);context.commit('JIAN',value)}, */jiaOdd(context,value){// console.log('actions中的jiaOdd被調用了',context,value);if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){// console.log('actions中的jiaWait被調用了',context,value);setTimeout(()=>{context.commit('JIA',value)},500)}
}
// 準備mutations--用于操作數據(state)
const mutations = {JIA(state,value){// console.log('mutations中的JIA被調用了',state,value);state.sum += value},JIAN(state,value){state.sum -= value}
}
// 準備state--用于存儲數據
const state = {sum:0 // 當前的和
}// 創建并暴露store
export default new Vuex.Store({/* actions:actions,mutations:mutations,state:state, */// 簡寫為:actions,mutations,state,
})// 暴露(導出)store
// export default store

Count.vue代碼：

<template><div><h1>當前求和為:{{$store.state.sum}}</h1><!-- 寫法一 --><!-- <select v-model="n"><option :value="1">1</option>加上冒號就是v-bind 雙引號及其內的東西當作js表達式解析,為數字型;如不加冒號,則是字符串型<option :value="2">2</option><option :value="3">3</option></select> --><!-- 寫法二(強制轉換) --><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">當前求和為奇數再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name:'Count',data() {return {n:1, // 用戶選擇的數字}},methods: {// 加increment(){// 如經過actions這樣寫:// this.$store.dispatch('jia',this.n) // $store是在vc身上// 如不經過actions這樣寫:this.$store.commit('JIA',this.n)},// 減decrement(){// 如經過actions這樣寫:// this.$store.dispatch('jian',this.n)// 如不經過actions這樣寫:this.$store.commit('JIAN',this.n)},// 當前求和為奇數再加incrementOdd(){if(this.$store.state.sum % 2) {this.$store.dispatch('jiaOdd',this.n)}},// 等一等再加incrementWait(){this.$store.dispatch('jiaWait',this.n)}}}
</script><style lang="css">button {margin-left: 5px;}
</style>

在這里插入圖片描述

2 vuex核心概念和API

2.1 getters配置項

概念：當state中的數據需要經過加工后再使用時，可以使用getters加工。

2.2 四個map方法的使用

2.2.1 mapState方法

用于幫助我們映射state中的數據為計算屬性

computed: {//借助mapState生成計算屬性：sum、school、subject（對象寫法）...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapState生成計算屬性：sum、school、subject（數組寫法）...mapState(['sum','school','subject']),
},

2.2.2 mapGetters方法

用于幫助我們映射getters中的數據為計算屬性

computed: {//借助mapGetters生成計算屬性：bigSum（對象寫法）...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成計算屬性：bigSum（數組寫法）...mapGetters(['bigSum'])
},

2.2.3 mapActions方法

用于幫助我們生成與actions對話的方法，即：包含$store.dispatch(xxx)的函數

methods:{//靠mapActions生成：incrementOdd、incrementWait（對象形式）...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//靠mapActions生成：incrementOdd、incrementWait（數組形式）...mapActions(['jiaOdd','jiaWait'])
}

2.2.4 mapMutations方法

用于幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數

methods:{//靠mapActions生成：increment、decrement（對象形式）...mapMutations({increment:'JIA',decrement:'JIAN'}),//靠mapMutations生成：JIA、JIAN（對象形式）...mapMutations(['JIA','JIAN']),
}

備注：mapActions與mapMutations使用時，若需要傳遞參數需要：在模板中綁定事件時傳遞好參數，否則參數是事件對象。

2.2.5 求和案例之四個map的使用

Count.vue代碼：

<template><div><h1>當前求和為:{{sum}}</h1><h3>當前求和放大10倍后為:{{bigSum}}</h3><h3>我在{{school}}學習{{subject}}</h3><!-- 寫法一 --><!-- <select v-model="n"><option :value="1">1</option>加上冒號就是v-bind 雙引號及其內的東西當作js表達式解析,為數字型;如不加冒號,則是字符串型<option :value="2">2</option><option :value="3">3</option></select> --><!-- 寫法二(強制轉換) --><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><!-- <button @click="increment(n)">+</button><button @click="decrement(n)">-</button> --><button @click="JIA(n)">+</button><button @click="JIAN(n)">-</button><!-- <button @click="incrementOdd(n)">當前求和為奇數再加</button><button @click="incrementWait(n)">等一等再加</button> --><button @click="jiaOdd(n)">當前求和為奇數再加</button><button @click="jiaWait(n)">等一等再加</button></div>
</template><script>// 引入import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'Count',data() {return {n:1, // 用戶選擇的數字}},computed:{// 靠程序員自己親自去寫計算屬性/*  sum(){return this.$store.state.sum},school(){return this.$store.state.school},subject(){return this.$store.state.subject}, */// 借助mapState生成計算屬性,從state中讀取數據(對象寫法)// 在一個Obj1里面 ...Obj2, 表示把Obj2里面的每一項key:value展開放入Obj1中// ...mapState({sum:'sum',school:'school',subject:'subject'}),// 借助mapState生成計算屬性,從state中讀取數據(數組寫法)...mapState(['sum','school','subject']),// ****************************************************************************// 靠程序員自己親自去寫計算屬性/* bigSum(){return this.$store.getters.bigSum} */// 借助mapGetters生成計算屬性,從getters中讀取數據(對象寫法)// ...mapGetters({bigSum:'bigSum'})// 借助mapGetters生成計算屬性,從getters中讀取數據(數組寫法)...mapGetters(['bigSum'])},methods: {// 程序員親自寫方法// 加/*  increment(){// 如經過actions這樣寫:// this.$store.dispatch('jia',this.n) // $store是在vc身上// 如不經過actions這樣寫:this.$store.commit('JIA',this.n)}, */// 減/* decrement(){// 如經過actions這樣寫:// this.$store.dispatch('jian',this.n)// 如不經過actions這樣寫:this.$store.commit('JIAN',this.n)},*/// 借助mapMutations生成對應的方法，方法中會調用commit為聯系mutations(對象寫法)// ...mapMutations({increment:'JIA',decrement:'JIAN'}),// ...mapMutations({JIA:'JIA',JIAN:'JIAN'}),// 借助mapMutations生成對應的方法，方法中會調用commit為聯系mutations(數組寫法)...mapMutations(['JIA','JIAN']),// ****************************************************************************// 程序員親自寫方法// 當前求和為奇數再加/* incrementOdd(){if(this.$store.state.sum % 2) {this.$store.dispatch('jiaOdd',this.n)}},// 等一等再加incrementWait(){this.$store.dispatch('jiaWait',this.n)}, */// 借助mapActions生成對應的方法，方法中會調用dispatch為聯系actions(對象寫法)// ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),// ...mapActions({jiaOdd:'jiaOdd',jiaWait:'jiaWait'}),// 借助mapActions生成對應的方法，方法中會調用dispatch為聯系actions(數組寫法)...mapActions(['jiaOdd','jiaWait']),},/* mounted() {console.log('Count',this.$store);} */}
</script><style lang="css">button {margin-left: 5px;}
</style>

在這里插入圖片描述

2.3 多組件共享數據

在這里插入圖片描述

App.vue代碼：

<template><div><Count/><hr><Person/></div>
</template><script>import Count from './components/Count.vue'import Person from './components/Person.vue'export default {name:'App',components:{Count,Person},}
</script>

index.js代碼：

// 該文件用于創建Vuex中最為核心的store// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)// 準備actions--用于響應組件中的動作
const actions = {// 下列jia和jian沒存在意義 所以可注釋掉// jia:function(){ 簡寫為/* jia(context,value){ // context意思是上下文 把commit放進了context內// console.log('actions中的jia被調用了',context,value);context.commit('JIA',value)},jian(context,value){// console.log('actions中的jian被調用了',context,value);context.commit('JIAN',value)}, */jiaOdd(context,value){// console.log('actions中的jiaOdd被調用了',context,value);if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){// console.log('actions中的jiaWait被調用了',context,value);setTimeout(()=>{context.commit('JIA',value)},500)}
}
// 準備mutations--用于操作數據(state)
const mutations = {JIA(state,value){// console.log('mutations中的JIA被調用了',state,value);state.sum += value},JIAN(state,value){// console.log('mutations中的JIAN被調用了',state,value);state.sum -= value},ADD_PERSON(state,value){// console.log('mutations中的ADD_PERSON被調用了',state,value);state.personList.unshift(value)}
}
// 準備state--用于存儲數據
const state = {sum:0, // 當前的和school:'霍格沃茲魔法學院',subject:'前端',personList:[{id:'001',name:'小王'}]
}
// 準備getters配置項--用于將state中的數據進行加工
const getters = {bigSum(state){return state.sum*10}
}// 創建并暴露store
export default new Vuex.Store({/* actions:actions,mutations:mutations,state:state, */// 簡寫為:actions,mutations,state,getters
})// 暴露(導出)store
// export default store

Count.vue代碼：

<template><div><h1>當前求和為:{{sum}}</h1><h3>當前求和放大10倍后為:{{bigSum}}</h3><h3>我在{{school}}學習{{subject}}</h3><h3 style="color:red">Person組件的總人數是:{{personList.length}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">當前求和為奇數再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>// 引入import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'Count',data() {return {n:1, // 用戶選擇的數字}},computed:{// 借助mapState生成計算屬性,從state中讀取數據(數組寫法)...mapState(['sum','school','subject','personList']),// 借助mapGetters生成計算屬性,從getters中讀取數據(數組寫法)...mapGetters(['bigSum'])},methods: {// 借助mapMutations生成對應的方法，方法中會調用commit為聯系mutations(對象寫法)...mapMutations({increment:'JIA',decrement:'JIAN'}),// 借助mapActions生成對應的方法，方法中會調用dispatch為聯系actions(對象寫法)...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),},/* mounted() {console.log('Count',this.$store);} */}
</script><style lang="css">button {margin-left: 5px;}
</style>

Person.vue代碼：

<template><div><h1>人員列表</h1><h3 style="color:red">Count組件求和為:{{sum}}</h3><input type="text" placeholder="請輸入名字" v-model="name"><button @click="add">添加</button><ul><li v-for="p in personList" :key="p.id">{{p.name}}</li></ul></div>
</template><script>import {nanoid} from 'nanoid'export default {name:'Person',data(){return {name:''}},computed: {personList() {return this.$store.state.personList},sum() {return this.$store.state.sum}},methods: {add() {const personObj = {id:nanoid(),name:this.name}// console.log(personObj);this.$store.commit('ADD_PERSON',personObj)this.name = '' // 添加完成后 輸入框為空}},}
</script>

在這里插入圖片描述

2.4 模塊化＋命名空間

目的：讓代碼更好維護，讓多種數據分類更加明確。
index.js修改為：

// 該文件用于創建Vuex中最為核心的store// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)import axios from 'axios'
import {nanoid} from 'nanoid'// 求和相關的配置
const countOptions = {namespaced:true, // 開啟命名空間actions:{jiaOdd(context,value){// console.log('actions中的jiaOdd被調用了',context,value);if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){// console.log('actions中的jiaWait被調用了',context,value);setTimeout(()=>{context.commit('JIA',value)},500)}},mutations:{JIA(state,value){// console.log('mutations中的JIA被調用了',state,value);state.sum += value},JIAN(state,value){// console.log('mutations中的JIAN被調用了',state,value);state.sum -= value},},state:{sum:0, // 當前的和school:'霍格沃茲魔法學院',subject:'前端',},getters:{bigSum(state){return state.sum*10}}
}// 人員管理相關的配置
const personOptions = {namespaced:true, // 開啟命名空間actions:{addPersonWang(context,value){if(value.name.indexOf('王') === 0){ // 包含王且第一個為王(姓王)context.commit('ADD_PERSON',value)}else{alert('添加的人必須姓王')}},addPersonServer(context){axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(response => {context.commit('ADD_PERSON',{ID:nanoid(),name:response.data})},error => {alert(error.message)})}},mutations:{ADD_PERSON(state,value){// console.log('mutations中的ADD_PERSON被調用了',state,value);state.personList.unshift(value)}},state:{personList:[{id:'001',name:'小王'}]},getters:{firstPersonName(state){return state.personList[0].name}}
}// 準備actions--用于響應組件中的動作
/* const actions = {jiaOdd(context,value){// console.log('actions中的jiaOdd被調用了',context,value);if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){// console.log('actions中的jiaWait被調用了',context,value);setTimeout(()=>{context.commit('JIA',value)},500)}
} */
// 準備mutations--用于操作數據(state)
/* const mutations = {JIA(state,value){// console.log('mutations中的JIA被調用了',state,value);state.sum += value},JIAN(state,value){// console.log('mutations中的JIAN被調用了',state,value);state.sum -= value},ADD_PERSON(state,value){// console.log('mutations中的ADD_PERSON被調用了',state,value);state.personList.unshift(value)}
} */
// 準備state--用于存儲數據
/* const state = {sum:0, // 當前的和school:'霍格沃茲魔法學院',subject:'前端',personList:[{id:'001',name:'小王'}]
} */
// 準備getters配置項--用于將state中的數據進行加工
/* const getters = {bigSum(state){return state.sum*10}
} */// 創建并暴露store
export default new Vuex.Store({/* actions:actions,mutations:mutations,state:state, */// 簡寫為:/* actions,mutations,state,getters */modules:{countAbout:countOptions,personAbout:personOptions}
})// 暴露(導出)store==
// export default store

Count.vue改為：

<template><div><h1>當前求和為:{{sum}}</h1><h3>當前求和放大10倍后為:{{bigSum}}</h3><h3>我在{{school}}學習{{subject}}</h3><h3 style="color:red">Person組件的總人數是:{{personList.length}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">當前求和為奇數再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>// 引入import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'Count',data() {return {n:1, // 用戶選擇的數字}},computed:{// 借助mapState生成計算屬性,從state中讀取數據(數組寫法)...mapState('countAbout',['sum','school','subject']),...mapState('personAbout',['personList']),// 借助mapGetters生成計算屬性,從getters中讀取數據(數組寫法)...mapGetters('countAbout',['bigSum'])},methods: {// 借助mapMutations生成對應的方法，方法中會調用commit為聯系mutations(對象寫法)...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),// 借助mapActions生成對應的方法，方法中會調用dispatch為聯系actions(對象寫法)...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),},/* mounted() {console.log('Count',this.$store);} */}
</script><style lang="css">button {margin-left: 5px;}
</style>

Person.vue改為：

<template><div><h1>人員列表</h1><h3 style="color:red">Count組件求和為:{{sum}}</h3><h3>列表中第一個人的名字是：{{firstPersonName}}</h3><input type="text" placeholder="請輸入名字" v-model="name"><button @click="add">添加</button><button @click="addWang">添加一個姓王的人</button><button @click="addPersonServer">添加一個人，名字隨機</button><ul><li v-for="p in personList" :key="p.id">{{p.name}}</li></ul></div>
</template><script>import {nanoid} from 'nanoid'export default {name:'Person',data(){return {name:''}},computed: {personList() {return this.$store.state.personAbout.personList},sum() {return this.$store.state.countAbout.sum},firstPersonName() {return this.$store.getters['personAbout/firstPersonName']}},methods: {add() {const personObj = {id:nanoid(),name:this.name}// console.log(personObj);this.$store.commit('personAbout/ADD_PERSON',personObj)this.name = '' // 添加完成后 輸入框為空},addWang() {const personObj = {id:nanoid(),name:this.name}this.$store.dispatch('personAbout/addPersonWang',personObj)this.name = '' // 添加完成后 輸入框為空},addPersonServer(){this.$store.dispatch('personAbout/addPersonServer')}},}
</script>