Vue——vue3中vuex状态管理的使用

store\index.js 文件

import { reactive } from 'vue'
const store = {
    state: reactive({
        message: 'helloword!!'
    }),
    setMessage (value) {
        this.state.message = value
    },
}

export default store

全局提供

App.vue文件

<script>
import store from './store/index.js'
export default {
  name: 'App',
  components: {
  },
  provide: {
    store
  },
  
}
</script>

demo.vue文件

<template>
  <h1>{{ store.state.message}}</h1>
  <button @click="store.setMessage('我是替换的字符')"></button>
</template>

<script>
export default {
  data () {
    return {
    
    }
  },
  // 注入
  inject: ['store']
}
</script>