一、Vuex概述
-
概念
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的使用组件之间数据的共享。在组件的外部定义了一个全局的空间STORE用来存储数据,所有组件都可以访问这些数据,不需要复杂的数据传递。
-
优点
- 能够在vuex中集中管理共享的数据,易于开发和后期维护。
- 能够高效地实现组件之间的数据共享,提高开发效率。
- 存储在vuex中的数据都是响应式的,能够时时保持数据与页面的同步。
-
什么数据适合存储到Vuex中
一般情况下,只有组件之间共享的数据才有必要存储到vuex中。
二、Vuex的基本使用
- 安装vuex依赖包
npm install vuex --save
- 导入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
- 创建store对象
const store = new Vuex.Store({
//state中存放的就是全局共享的数据
state:{count:0}
})
- 将store对象挂载到vue实例中
new Vue({
el:'#app',
render:h=>h(app),
router,
//将创建的共享数据对象,挂在到Vue实例中
//所有的组件。就可以直接从store中获取全局的数据了
store
})
三、Vuex的核心概念
- State:提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中存储。
const store = new Vue.Store({
//state中存放的就是全局共享的数据
state:{count:0}
})
组件访问State中数据的第一种方式:
this.$store.state.全局数据名称
组件访问State中数据的第二种方式:
(1)从vuex中按需引入mapState函数
import {mapState} from 'vuex'
(2)通过刚才导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性:
computed:{
...mapState(['count'])
}
-
Mutation:用于变更Store中的数据
(1)只能通过mutation变更Store数据,不可以直接操作Store中的数据。
(2)通过这种方式虽然操作起来稍微频繁一些,但是可以集中监控所有数据的变化。
(3)不要在mutations函数中,执行异步操作
//定义Mutation
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
//step是传递的参数,可选
add(state,step){
state.count++
}
}
})
//触发mutation,第一种方式
methods:{
handle(){
//如果要传递参数,加在后面,用逗号分隔
this.$store.commit('add',3)
}
}
//触发mutation,第二种方式
(1)导入mapMutations函数
import {mapMutations} from 'vuex'
(2)将指定的mutations函数,映射为当前组件的methods函数
methods:{
...mapMutations(['add','addN'])
}
- Action:用于处理异步任务。如果通过异步操作变更数据,必须通过Action,而不能用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。
//定义Action
const store = new Vuex.Store({
//...省略其他代码
mutations:{
add(state,step){
state.count++
}
},
actions:{
//第二个是调用时需要传递的参数,可选
addAsync(context,step){
setTimeout(()=>{
//不能直接修改state中的数据,必须通过mutation
context.commit('add',step)
},1000)
}
}
})
//触发Action,第一种方式
methods:{
handle(){
//如果调用的方法有参数要传递,写在后面用逗号隔开
this.$store.dispatch('addAsync',5)
}
}
//触发Action,第二种方式
(1)导入mapActions函数
import {mapActions} from 'vuex'
(2)
methods:{
...mapActions(['subAsync']),
}
- Getter:用于对Store中的数据进行加工处理形成新的数据。
(1)Getter可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。
(2)Store中数据变化后,Getter的数据也会跟着变化。
//定义Getter
const store = new Vuex.Store({
state:{
count:0
},
getters:{
showNum:state=>{
return '当前最新的数量是'+state.count
}
}
})
//使用Getter,第一种方式
this.$store.getters.名称
//使用Getter,第二种方式
import {mapGetters} from 'vuex'
computed:{
...mapGetters(['showNum'])
}