Vuex详解

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