vue3学习笔记—状态管理、获取数据、解决跨域问题_vue3 使用fetch跨域

状态管理

provide/inject 跨级通信

状态集中管理，provide输出数据，inject接受数据

src\App.vue

<script>
import Home from './views/Home.vue'
import store from './store';
 
export default{
  provide:{
    store
  },
  components:{
    Home,
  }
}
</script>
 
<template>
  <Home/>
</template>

src\views\Home.vue

<template>
    <div>
        {
  {store.state.msg}}
    </div>
    <button @click="updateMsg">改变msg</button>
</template>
<script>
export default{
    inject:['store'],
    methods:{
        updateMsg:function () {
            this.store.updateMsg()
        }
    }
}
</script>

src\store\index.js

import {reactive} from 'vue'
 
const store={
    state: reactive({
        msg