You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.3 KiB
53 lines
1.3 KiB
<template> |
|
<div> |
|
<h1>当前求和为: {{ sum }}</h1> |
|
<h3>当前求和放大10倍后为: {{ bigSum }}</h3> |
|
<h3>我在{{ school }}，学{{ subject }}</h3> |
|
<h3 style="color: red">Person组件的总人数是：{{personList.length}}</h3> |
|
<select v-model.number="n"> |
|
<option value="1">1</option> |
|
<option value="2">2</option> |
|
<option value="3">3</option> |
|
</select> |
|
<button @click="add(n)">+</button> |
|
<button @click="sub(n)">-</button> |
|
<button @click="addOdd(n)">当前求和为奇数再加</button> |
|
<button @click="addWait(n)">等一等再加</button> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import {mapState, mapGetters, mapMutations, mapActions} from "vuex"; |
|
|
|
export default { |
|
name: "Count", |
|
data() { |
|
return { |
|
n: 1 |
|
} |
|
}, |
|
mounted() { |
|
console.log('Count', this) |
|
}, |
|
|
|
methods: { |
|
...mapMutations({add:'vuexAdd', sub:'vuexSub'}), // 对象写法 |
|
// ...mapMutations(['vuexAdd', 'vuexSub']), //数组写法 |
|
|
|
...mapActions({addOdd:'vuexAddOdd', addWait:'vuexAddWait'}), |
|
}, |
|
|
|
computed: { |
|
...mapState(['sum', 'school', 'subject','personList']), // 数组写法 |
|
// ...mapState({sum: 'sum', school: 'school', subject: 'subject'}), // 对象写法 |
|
|
|
...mapGetters({bigSum: 'bigSum'}) |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
button { |
|
margin-left: 5px |
|
} |
|
</style> |