Vuex
概念
在Vue中实现集中式状态(数据)管理的一个Vue的插件，对Vue应用中多个组件的共享状态进行集中式管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间的通信。
使用场景
多个组件需要共享数据时。
搭建Vuex环境
ps：vue2只能使用Vuex3，Vue3只能使用Vue4
1. 创建文件：src/store/index.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)
//准备actions用于响应组件中的动作
const actions = {}
//准备mutations用于操作数据（state）
const mutations = {}
//准备state用于存储数据
const state = {}
//创建并暴露store, store用于管理上面三个对象
export default new Vuex.Store({
actions,
mutations,
state
})
2. 在main.js中创建vm时传入store配置项
...
//引入store
import store from './store'
...
// 创建Vue实例对象
new Vue({
render: h => h(App),
store,
}).$mount('#app')
3.组件中读取vuex的数据
$store.state.xxx
4.组件中修改vuex中的数据
//当有业务逻辑时（需要对数据进行判断再做操作时）
$store.dispatch('actions中的方法名', 数据)
//当数据可以直接提交时
$store.commit('mutations中的方法名', 数据)
getters的使用
概念
当state中的数据需要经过加工再使用时，可以使用getters，类似于computed。
1. 在store/index.js中追加getters配置
const getters = {
bigSum(state) {
//用return的方式返回数据
return state.sum * 10
}
}
...
export default new Vuex.Store({
...
getters
})
2. 在组件中读取数据
$store.getters.bigSum
四个map方法的使用
映射
一开始我们在模板中读取state中的数据，例如：
this.$store.state.sum
但是vue追求简单的模板语法，如果多个模板用到state中的数据，模板则会变得非常复杂。
然后我们使用计算属性从state中读取数据，例如：
computed: {
...
school() {
return this.$store.state.school
},
subject() {
return this.$store.state.subject
}
bigSum() {
return this.$store.getters.bigSum
}
...
}
虽然这样模板中可以直接使用计算属性，精简很多，但是可以看出计算属性中代码又过于繁琐，且重复。
由此诞生了map方法。
1. mapState
用于帮助我们映射state中的数据作为计算属性。
computed: {
//借助mapState生成计算属性： sum，school、subject
//对象写法
//({生成的计算属性名: '读取的属性名'})
...mapState({sum: 'sum', school: 'school', subject: 'subject'})
//数组写法
//生成的计算属性名得与读取的属性名一致
...mapState(['sum', 'school', 'subject'])
}
ps：vue开发者工具里会将mapState里的属性放在 vuex bindings里，而不是computed里，mapGetters同理。
2. mapGetters
用于帮我们映射getters中的数据作为计算属性。
computed: {
//对象写法
...mapGetters({bigSum: 'bigSum'})
//数组写法
...mapGetters(['bigSum'])
}
对话
我们在methods中与mutations和actions对话的方法是：
methods: {
increment() {
this.$store.commit('JIA', this.n)
},
decrement() {
this.$store.commit('JIAN', this.n)
},
incrementOdd() {
this.$store.dispatch('jiaOdd', this.n)
},
incrementWait() {
this.$store.dispatch('jiaWait', this.n)
}
}
还是同样的问题，重复代码较多。
1. mapMutations
用于帮我们生成mutations对话的方法，即：包含$store.commit(xxx)。
对象写法
//模板
<!-- 用map方法需要在模板中传参，不传无法读取n值，并且默认传过去一个event事件 -->
<button @click="increment(n)">+</button>
<button @click="decrement(n)">-</button>
//方法
methods: {
//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations
//{方法名: 提交的方法名}
//需要在模板中传参数n，否则默认传过去event事件
...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),
}
数组写法
//模板
<button @click="JIA(n)">++</button>
<button @click="JIAN(n)">--</button>
//方法
// 方法名得与mutations中的方法名一致
methods: {
...mapMutations(['JIA', 'JIAN']),
}
2. mapActions
用于帮我们生成actions对话的方法，即：包含$store.dispatch(xxx)。
对象写法
//模板
<button @click="incrementOdd(n)">奇数时+1</button>
<button @click="incrementWait(n)">等一等再加</button>
//方法
// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
methods: {
...mapActions({ incrementOdd: 'jiaOdd', incrementWait: 'jiaWait' })
}
数组写法
//模板
<button @click="jiaOdd(n)">奇数时++1</button>
<button @click="jiaWait(n)">等一一等再加</button>
//方法
// 方法名得与mutations中的方法名一致
methods: {
...mapActions(['jiaOdd','jiaWait'])
}
vuex模块化+命名空间
目的
让代码更好维护，让多种数据分类更加明确。
如何模块化？
1. 创建功能不同的模块js
举例：
count.js
//求和相关配置
export default {
// 默认为false，true了后才能被其他组件读取该模块
namespaced: true,//命名空间
actions: {...},
mutations: {...},
state: {...},
getters: {...}
}
person.js
//人员相关配置
export default {
namespaced: true,//命名空间
actions: {...},
mutations: {...},
state: {...},
getters: {...}
}
index.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)
import countOptions from './count'
import personOptions from './person'
export default new Vuex.Store({
//模块化
modules: {
countAbout: countOptions,
personAbout: personOptions
}
})
2. 开启命名空间后，组件中读取state数据
//方式一,自己直接读取
this.$store.state.personAbout.personList
//方式二，借助mapState读取，读取personAbout模块的personList
...mapState('personAbout', ['personList']),
3. 开启命名空间后，组件中读取getters数据
//方式一
//读取带斜线的属性不能用getters.personAbout/firstPersonName
//js语法，可以使用['']读取属性
this.$store.getters['personAbout/firstPersonName']
//方式二，借助mapGetters读取
...mapGetters('personAbout', ['firstPersonName'])
4. 开启命名空间后，组件中调用dispatch
//方式一
this.$store.dispatch('personAbout/addPersonWang', person)
//方式二，借助mapActions
...mapActions('personAbout', ['addPersonWang'])
5. 开启命名空间后，组件中调用commit
//方式一
this.$store.commit('personAbout/ADD_PERSON', person)
//方式二，借助mapActions
...mapMutations('personAbout', ['ADD_PERSON'])