直播平台源代码，vue3 provide与inject进行状态管理

一、数据仓库准备

在store–>新建index.js文件，作为仓库数据

状态集中管理

数据实现响应式

ref reactive—>对象中存储状态msg,age,counter

import {reactive} from 'vue'<br>const store={<br>//数据<br>    state:reactive({<br>        msg:"Hello Word LLT"<br>    }),<br>    //方法<br>    updateMsg:function(){<br>        this.state.msg="你好 LLT"<br>    }<br>}<br>//如何在App组件通过provide提供<br>export default store<br> 

二、子组件准备

Hello.vue 文件

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

或者用setup （推荐）

<br><script setup><br>    import { inject } from 'vue';<br>    const store=inject(['store']);<br>    function updateMsg(){<br>        store.updateMsg();<br>    }<br></script><br> 

三、根组件使用(最终使用)

<script setup><br>import Hello from './components/Hello.vue'<br>import store from "./store";//引入<br>import {provide } from 'vue'<br>provide('store',store)<br></script><br><template><br><Hello/><br></template>

以上就是直播平台源代码，vue3 provide与inject进行状态管理，更多内容欢迎关注之后的文章