一、概述
1、组件之间共享数据方式
①子向父:v-bind
②父向子:v-on
③兄弟:eventBus
数据接收:$on数据发送:$emit
2、Vuex概念
Vuex是实现组件全局状态管理的一种机制,可以方便的实现组件之间的数据共享
3、Vuex统一管理状态的好处
①能够在Vuex中集中管理共享的数据,易于开发和后期维护
②能够高效地实现组件之间的数据共享,提高开发效率
③存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
4、什么样的数据适合存储到vuex中
一般情况下,只有组件之间共享的数据,才有必要存储到vuex中,对于组件中的私有数据,依旧存储在组件自身的data中即可
二、Vuex的基本使用
1、安装vuex依赖包
npm i vuex --save
2、导入vuex包
import Vuex from 'vuex'
3、创建store对象
export default new Vuex.Store({
state: {
count: 0
},})
4、将store对象挂载到vue实例中
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
可以直接使用vue-cli
三、Vuex的核心概念
1、State
State提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行存储
(1)组件访问State中数据的第一种方式:
this.$store.state.全局数据名称
<h3>当前最新count值为:{{ this.$store.state.count }}</h3>
(2) 组件访问State中数据的第二种方式:
①从vuex中按需导入mapState函数
import { mapState } from 'vuex'
②通过刚才导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性
export default {
computed: {
...mapState(['count'])
},}
2、Mutation
注意:直接修改store中的数据是不被允许的!!
错误案例:
(1)概念
Mutation用于变更Store中的数据
①只能通过mutation变更Store数据,不可以直接操作Store中的数据
②通过这种方式虽然操作起来稍微繁琐一点,但是可以集中监控所有数据的变化
mutations: {
add (state) {
state.count ++
},
},
methods: {
add () {
this.$store.commit('add')
},
}
(2)传参
mutations: {
add (state, n) {
state.count += n
},
},
export default {
methods: {
add (n) {
this.$store.commit('add', n)
},
}
(3)触发mutation的第二种方式
①从vuex中按需导入mapMutation函数
import { mapMutations } from 'vuex'
②通过mapMutation函数将需要的mutations函数映射为当前组件的methods函数
export default {
methods: {
...mapMutations(['sub']),
handler () {
this.sub(2)
},
}
}
注:不要在mutation函数中进行异步操作
3、Action
Action处理异步任务
(1)基本使用
如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据
mutations: {
add (state, n) {
state.count += n
},
},
actions: {
addAsync (context, n) {
setTimeout(() => {
context.commit('add', n)
}, 1000)
},
},
export default {
methods: {
add2 (n) {
this.$store.dispatch('addAsync', n)
}
}
}
<button @click="add2(2)">+1</button>
(2)触发action的第二种方式
①从vuex中按需导入mapActions函数
import { mapActions } from 'vuex'
②通过导入的mapActions函数,将需要的actions函数,映射为当前组件的methods方法:
export default {
methods: {
...mapActions(['subAsync', 'addAsync']),
handler2 (n) {
this.subAsync(n)
}
}
}
4、Getter
Getter用于对Store中的数据进行加工处理形成新的数据
①Getter可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性
②Store中数据发生变化,Getter的数据会跟着变化
(1)使用getters的第一种方式
getters: {
showNum: state => {
return '当前最新的数量是{' + state.count + '}'
}
},
<h3>{{ this.$store.getters.showNum }}</h3>
(2)使用getter的第二种方式
import { mapGetters, mapState } from 'vuex'
export default {
computed: {
...mapGetters(['showNum']),
},
}
<h3>{{ showNum }}</h3>