Vue3 Provide 和 Inject 实现状态管理

Provide 和 Inject 可以用来跨级通讯，也可以用来进行状态集中管理

vuex是用来对vue进行状态管理的，一般大型项目用到

状态管理：就是现在有一些数据需要集中管理

使用步骤：

1.src文件夹下新建store文件夹，再新建index.js文件

//状态集中管理
import { reactive } from 'vue'
const store = {
  state: reactive({  //定义状态
    msg: 'hello word'
  }),
  updataMsg() {
    this.state.msg = '你好'
  }
}

export default store

2. App.vue引入，将store提供出去

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>

<script>
import store from "../store";
export default {
  provide: {
    store
  }
}
</script>

3.在需要用到store数据的组件中直接使用

<template>
  {
   
   { store.state.msg }}
  <button @click="updataMsg">改变值</button>
</template>

<script>
export default {
  inject: ["store"],
  methods: {
    updataMsg() {
      this.store.updataMsg()
    }
  }
}
</script>

这样就就可实现状态管理了