关于vuex:P34-vuex-状态管理

88次阅读

共计 626 个字符，预计需要花费 2 分钟才能阅读完成。

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

正文完