使用Vue.observable()进行状态管理

使用Vue.observable()进行状态管理

用法：

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：

eg: 目录结构

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 ++
  },
  minusCount () {
      store.count --
}

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>