Vuex

1. 概念：专门在Vue中实现集中式状态（数据）管理的Vue插件，对Vue应用中多个组件的共享状态（数据）进行集中管理（读/写），也是组件间通信的一种方式，适用于任意组件间通信

2. 适用情况

   1. 多个组件依赖于同一种状态
   2. 来自不同组件的行为需要变更同一状态

求和案例（vue版）

Count组件

<script>
import {defineComponent} from 'vue'
​
export default defineComponent({
    name: "Count",
    data(){
        return {
            sum:0,
            number:1,
        }
    },
    methods:{
        increment(){
            this.sum+=this.number
        },
        decrement(){
            this.sum-=this.number
        },
        incrementOdd(){
            if (this.sum%2){
                this.sum+=this.number
            }
        },
        incrementWait(){
            setTimeout(()=>{
                this.sum+=this.number
            },500)
        },
    }
})
</script>
​
<template>
    <div class="count">
        <h1>当前求和为：{{sum}}</h1>
        <select v-model.number="number">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前求和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>
​
<style scoped>
button{
    margin-left: 5px;
}
</style>