一,什么是vuex?
专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应 用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方 式,且适用于任意组件间通信。
1,让我们从一个简单的 Vue 计数器应用程序来认识vuex:
const Counter = {
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{
{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
}
createApp(Counter).mount('#app')
2,原理图
- 状态,驱动我们应用程序的事实来源;
- 视图,状态的声明性映射;
- 操作,状态在响应视图中的用户输入而更改的可能方式。
①,这是单向数据原理图,
②,当我们有多个共享共同状态的组件时,这种简单性很快就会崩溃:
- 多个视图可能依赖于同一个状态。
- 来自不同视图的操作可能需要改变同一状态。
二,应用场景
多个组件应用与同一个状态,多个组件变更同一状态。
三,安装
npm i vuex@3 // 注释:@3是版本号,vue2用vuex@3版本,vue3用4版本