vuex是什么?
是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享
好处
- 能够在vuex中,集中管理共享的数据,易于开发和后期维护
- 能够高效地实现组件之间的数据共享,提高开发效率
- 存放在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
它有几种核心属性?
Vuex有五个核心概念,state, getters, mutations, actions, modules。
state
提供唯一的公共数据源,所有共享数据都要统一放到Store的State中进行存储
// 创建store数据源
const store = new Vuex.Store({
state:{
name:"张三"
}
})
// 组件访问State中的数据
this.$store.state.全局数据名称
this.$store.state.name
mutation
用于变更Store中的数据,提交更新数据的方法,必须是同步的(如果需要异步使用action)
// 定义mutation
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
// 第一个参数是state对象
add(state){
// 变更状态
state.count++
}
}
})
// 触发mutation
methods:{
aa(){
// add是mutation里面的方法
this.$store.commit('add')
}
}
// commit 用来触发mutation里面方法用的
this.$store.commit('mutations方法名',值)
action
action和mutation功能大致相同,不同之处在与action提交的是mutation,而不是直接变更状态,可以包含异步操作(用于处理异步任务)
如果通过异步操作变更数据,必须通过action,而不能使用mutation,但是在action中还是要通过触发mutation的方式间接变更数据
// 定义action
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
add(state){
state.count++
}
},
actions:{
// 第一个参数是context
addAsync(context){
setTimeout(()=>{
context.commit('add')
},1000)
}
}
})
// 触发action
methods:{
abc(){
// addAsynce 是actions里面的方法
this.$store.dispatch('addAsynce')
}
}
// dispatch 用来触发action里面的方法
this.$store.dispatch('addAsynce',值)
getter
从基本数据state派生的数据,相当于state的计算属性,具有返回值的方法
会返回一个新数据,不会影响到state里面的老数据
store中的数据发生变化.getter的数据也会跟着变化
const store = new Vuex.store({
state:{
count:0
},
getters:{
userId1:function(state){
return state.count * 2
}
}
})
// 触发getter
this.$store.getters.userId1
modules
模块化vuex
可以让每一个模块拥有自己的state,mutation,action,getters,使得结构非常清晰,方便管理
总结
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex