vue--day69---vuex

标签：间通信 vue -- sum --- 组件 day69 vuex

1. vuex 是什么

概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，且适用于任意组件间通信。 2. 什么时候使用 Vuex 1. 多个组件依赖于同一状态 2. 来自不同组件的行为需要变更同一状态 3. Vuex 原理图

4. 求和案例

Count.vue

 

<template> <div>
<h1>当前求和位{{ sum}}</h1> <select v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <button @click="increment">+</button> <button @click="dectement">-</button> <button @click="incrementOdd">>当前和为奇数在加</button> <button @click="incrementWait">等一等在加</button> </div> </template>
<script> export default { name:'Count', data(){ return { n:1, sum:0 } }, methods:{ increment(){ this.sum+=this.n },
dectement(){ this.sum-=this.n }, incrementOdd(){ if(this.sum%2){ this.sum+=this.n } }, incrementWait(){ setTimeout(()=>{ this.sum+=this.n },500)   }
} } </script>
<style> button{ margin-left: 10px; }
</style>

标签：间通信,vue,--,sum,---,组件,day69,vuex
From： https://www.cnblogs.com/satisfysmy/p/17653071.html