App.vue
<script>import store from "./store";import Home from "./views/Home.vue";export default { provide:{ store, }, components:{ Home, }}</script><template> <Home /></template>Home.vue
<template> <div> <div>{{store.state.msg}}</div> <button @click="updateMsg">扭转msg</button> </div></template><script>export default { name: "Home", inject: ['store'], methods: { updateMsg: function () { this.store.updateMsg(); } },}</script><style scoped></style>index.js
//实现响应式//集中管理//如何在app组件中通过provide提供// ref ractive --> 对象中存储的状态 msg，gae，conuter等import {reactive} from 'vue'const store={ state:reactive({ msg:"hellokugou" }), updateMsg:function (){ this.state.msg='你好，类好呀' }}export default store