一个简单的 Vue 计数应用:
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
该状态自管理应用包含以下几个部分:
以下是一个表示“单向数据流”理念的简单示意:
当遇到多个组件共享状态时,单向数据流的简洁性容易被破坏:
因此,如果把组件的共享状态抽取出来,以一个全局单例模式管理,在这种模式下,组件树构成一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或触发行为,而且代码也会变得更结构化、易维护。
这就是 Vuex 背后的基本思想,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。