P34. vuex 状态管理

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