18. 设置状态管理 reactive，inject，provide，全局管理

示例一：

<template>
  <div>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld  />
  </div>
</template>


<script>
import { reactive } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

// 创建store对象
const store = {
    //创建响应式对象
    state:reactive({
        message:"helloworld"
    }),
    setMessage(value){
        this.state.message = value
    }
}

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  // 放到App，其他可以引用
  provide:{
    store
  }
}
</script>

<template>
  <div>
    {{store.state.message}}
    <button @click="store.setMessage('老陈')">点击改变</button>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  },
  // 注入进来
  inject:['store']
}
</script>

示例二：
通常这类对象，会单独放在store/index.js中

import { reactive } from 'vue'

// 创建store对象
const store = {
    //创建响应式对象
    state:reactive({
        message:"helloworld"
    }),
    setMessage(value){
        this.state.message = value
    }
}
// 可以将其导出
export default store;

<template>
  <div>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld  />
  </div>
</template>


<script>

import HelloWorld from './components/HelloWorld.vue'
import store from './store/index'


export default {
  name: 'App',
  components: {
    HelloWorld
  },
  // 放到App，其他可以引用
  provide:{
    store
  }
}
</script>