官方解释:Vuex时一个Vue.js应用程序开发的状态管理模式
状态管理是什么?
其实,可以简单的将其看成把需要的多个组件共享的变量全部存储在一个对象里面
管理什么状态呢?
比如用户的登陆状态,用户名称,头像,地理位置信息等等
购物车的收藏,购物车中的物品等等
这些状态信息,我们可以放在统一的地方,对它进行保存和管理,而且它们时响应式的
vueX实例格式:
按照规定好的进行访问和修改等操作
const store = new VueX.Store({
state:{
counter: 1000
},
mutations:{
//方法
},
actions:{
},
getters:{
},
modules:{
}
Vuex核心概念
state,mutations,actions,getters,modules
state单一状态树:如果你的状态信息时保存多个state对象中的,那么之后的管理和维护等等都会变得特别的困难,所有Vuex也使用了单一的状态树来管理应用层级的全部状态,单一状态数能够让我们最直接的方式找到某个状态的片段
Mutation传递参数
在通过mutation更新数据的时候,有可能我们希望携带一些额外的参数
参数被称为是mutation的载荷(Payload)
Mutation中的代码
decrement(state, n) {
state.count -= n
}
decreMent: function() {
this.$store.commit('decrement', 2)
}
如果参数不是一个呢?
比如我们要传递多个参数
这个时候,我们可以以对象的方式传递,也就是payload是一个对象
decrement(state, payload) {
state.count = payload.count
}
decreMent: function() {
this.$store.commit('decrement', {count: 0})
}
网友评论