标签：closed tor compute button return 图片 inf zh-cn 实现
https://vuex.vuejs.org/zh-cn
state --> view --> action -> state
多组件共享状态， 之前操作方式，由父组件传递到各个子组件。 当路由等加入后，会变得复杂。 引入viewx 解决共享问题。
安装
npm install --save vuex
代码1 ：原vue实现计数器
app.uve
<template>
<div>
<p>点击次数{{count}}， 奇偶数:{{eventOrOdd}}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">奇数加</button>
<button @click="incrementAsync">异步加</button>
</div>
</template>
<script>
export default {
data () {
return {
count: 0
}
},
computed: {
eventOrOdd () {
return this.count % 2 === 0 ? ‘偶数‘ : ‘奇数‘
}
},
methods: {
increment () {
const count = this.count
this.count = count + 1
},
decrement () {
const count = this.count
this.count = count - 1
},
incrementIfOdd () {
const count = this.count
if (count % 2 === 1) {
this.count = count + 1
}
},
incrementAsync () {
setTimeout(() => {
const count = this.count
this.count = count + 1
}, 1000)
}
}
}
</script>
<style>
</style>
代码2：
标签：closed tor compute button return 图片 inf zh-cn 实现
原文地址：https://www.cnblogs.com/infaaf/p/9689832.html
