Vuex是什么?
官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
其实通俗讲就是 在data中的属性需要共享给其他vue组件使用的部分,父子组件,兄弟组件之间的通信都可以通过vuex来实现
Vuex都有什么??
const store = new Vuex.Store({
state:{
count:1
},
getters:{
personInfo(state){
return 'i am ' + state.count
}
},
mutations:{
INCREMENT(state){
state.count++
}
// 一般都用大写作为方法名 大家习惯一下吧 这里用大写是关于mutations-type的一些用法,初学者可忽略
},
actions:{
handleAsync({commit}){
commit('INCREMENT')
}
}
})
- state:存储状态,也就是变量
- getters:派生状态,也就是set、get中的get,有两个可选参数:state、getters分别可以获取state中的变量和其他的getters,外部调用方式:store.getters.personInfo(),和vue中的computed差不多
- mutations:提升状态修改,也就是set、get中的set,这是vuex中唯一修改state的方式,但不支持异步操作。第一个参数默认是state。外部调用方式:store.commit(‘SET_AGE’,18)。和vue中的methods类似。
- actions :Actions 提交的是mutations,而不是直接变更状态。Actions可以包含任意异步操作。
通过上面的这张图,可以看出来,所有的数据存储在state里面,vue的组件通过store.state或者mapState()来读取state里面的数据,而state里面的数据只能通过mutations来改变,组件可以通过$store.commit()来触发mutations里面的方法来改变state的数据,但是mutations只能提交同步方法,所以就出现了actions,actions里面可以使用异步方法,但是actions是改变mutations来改变state的方法,组件通过.dispatch来触发actions的方法
mutations和actions之间的触发
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
const modulesA = {
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++
},
},
}
const store = new Vuex.Store({
modules: {
a: modulesA,
},
})
通过store.state.a就获取了modulesA的状态