demo目录
Parent.vue
Child.vue
store.js
store.js
import Vue from 'vue'
export const store = Vue.observable({
count: 0
})
export const mutations = {
addCount () {
store.count = store.count + 1
},
minusCount () {
store.count = store.count - 1
}
}
Parent.vue
<template>
<div>
<p>parent: {{ store.count }}</p>
<button @click.prevent="handleAdd">父组件 - 加</button>
<button @click.prevent="handleMinus">父组件 - 减</button>
<Child></Child>
</div>
</template>
<script>
import { store, mutations } from './store'
import Child from './Child'
export default {
name: 'ParentPage',
components: {
Child
},
data () {
return {
store: store
}
},
methods: {
handleAdd () {
mutations.addCount()
},
handleMinus () {
mutations.minusCount()
}
}
}
</script>
Child.vue
<template>
<div>
<p>child: {{ store.count }}</p>
<button @click.prevent="handleAdd">子组件 - 加</button>
<button @click.prevent="handleMinus">子组件 - 减</button>
</div>
</template>
<script>
import { store, mutations } from './store'
export default {
name: 'ChildPage',
data () {
return {
store: store
}
},
methods: {
handleAdd () {
mutations.addCount()
},
handleMinus () {
mutations.minusCount()
}
}
}
</script>
