vue3 基于reactive 封装store

1、各模块

// src>store>homeData.js
import { reactive } from "vue"

const homeData ={
  name:'张三',
  setName(value){
    this.name = value
  }
}
export default reactive(homeData)

// src>store>memberData.js
import { reactive } from "vue"

const memberData = {
  age: 0,
  setAge(value) {
    this.age = value
  }
}
export default reactive(memberData)

// src>store>userInfo.js
import member from './member'
import homeData from './homeData'
import { reactive } from 'vue'
const userInfo = {
  getUserInfo () {
    return ` 名字${homeData.name} 年龄： ${member.age} `
   }
}
export default reactive(userInfo)

// src>store>index.js
import memberData from './member'
import homeData from './homeData'
import userInfo from './userInfo'

const store = createStore({
  memberData,
  homeData,
  userInfo
})

function createStore(parmas) {
  return {
    install(app) {
      this.provide(app)
    },
    provide(app) {
      const keys = parmas&&Object.keys(parmas)
      keys&&keys.forEach((item) => { 
        // 注册
        app.provide(item,parmas[item])
      })
    }
  }
}
export default store

2、 注册provide

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(router).use(store)
router.isReady().then(() => app.mount("#app"));

3、 使用与赋值

// holleWord.vue
<template>
  <h2>{{nameAndAge}}</h2>
  <h2>{{nameAgeComputed}}</h2>
  <button @click="setAge(++age);">count is: {{ age }}</button>
  <button @click="setName(name==='ccc'?'aaa':'ccc')">name: {{ name }}</button>
  <div>{{getUserInfo()}}</div>
</template>

<script>
import { computed, inject, reactive, ref, toRefs, watchEffect } from 'vue'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(){
    const memberData = inject('memberData')
    const homeData = inject('homeData')
    const userInfo = inject('userInfo') // 模块内部组合响应式变量  getUserInfo 方法
    // watch 页面组合两个响应式变量
    const nameAndAge = ref('')
    watchEffect(()=>{
      nameAndAge.value =  memberData.age + homeData.name
    })
    // computed 页面组合两个响应式变量
    const nameAgeComputed = computed(() =>  memberData.age + homeData.name)

    const data = {...toRefs(memberData),...toRefs(homeData),...toRefs(userInfo), nameAndAge,nameAgeComputed}
    return data
  }
}
</script>