Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
与react中的redux类似,可以对组件的中的状态进行一个统一集中的管理。
应用场景:登录注册、购物车、组件中复杂的逻辑。
核心概念:
- state(唯一的状态管理对象)
- getters(计算属性,对state中的属性做进一步的处理)
- mutations(读写state)
- actions(触发mutations)
- modules(对以上属性的封装)
state: {
userinfo: [],
token: '',
username: '',
history: []
},
getters:{},
mutations: {
register(state, users) {
state.userinfo = users
},
},
actions: {
register(context, users) {
context.commit("register", users)
},
modules: {
a:{
state: {},
getters: {},
mutations: {},
actions: {}}
}
其中 actions对state的更改是通过commit
触发 mutations进行更改的,对 actions的更改是异步的、通过dispatch
函数。
mutations
是有默认的形参的
([state] [payload])
state
是当前VueX对象中的statepayload
是该方法在被调用时传递参数使用的
actions
与mutations类似,
([context] [payload])
其中 context是 上下文(相当于箭头函数中的this)对象,payload 外部挂载参数。
组件中触发:
this.$store.dispatch("edit",value)
getters
:中方法的第三个参数是根节点状态
models:{
a:{
state:{key:5},
getters:{
getKeyCount(state,getter,rootState){
return rootState.key + state.key
}
},
....
}
}
我对vuex的理解:
vue中的数据流动是单向的,子组件不能直接修改父组件中的数据。同时子组件和子组件之间不允许相互传值,如果子组件的上级还有层级的话,这样传值就显得很麻烦。
这时我们就需要考虑是否应该把这些需要多次用到的数据放到一个地方 便于其他组件的使用。这时候vuex就可以很好的解决这个问题。