Vuex详解
Vuex是一个专为Vue.js应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生改变。
- 状态管理模式
- 集中式存储管理
在多个组件间共享状态的插件
一,单界面的状态管理
1.在单个组件中进行状态管理
- State:状态(data中的属性)
- VIew:视图层,针对State的变化,显示不同的信息。
- Actions:主要是用户的各种操作:点击,输入等等,导致状态的改变。
<template>
<div>
<div>当前计数:{{counter}}</div>
<button @click="counter+=1">+1</button>
<button @click="counter-=1">-1</button>
</div>
</template>
<script>
export default {
name: "home",
data(){
return{
counter:0
}
}
}
</script>
- counter需要某种方式被记录下来,State
- counter的值需要被展示在界面中,也就是我们的view
- 界面发生操作时(点击),需要去更新状态,也就是Actions