Vuex4，在Vue3环境下如何优雅的管理状态？

export default createStore({
  state: {
    // 表单弹窗的状态
    formState: {
      editState: 'add', // 编辑状态，add：添加；update：修改；show ：只读显示
      id: 0, // 0：添加；其他：要修改或者显示的数据的ID
      isOpen: false, // 是否打开弹窗（模态）
      model: {} // 这里只是演示异步加载，实际项目中并不适合这么做
    }
  },
  mutations: {
    // 改变表单弹窗的状态
    setFormState(state, form) {
      // 可以设置单独的属性，这里偷懒了。
      Object.assign(state.formState, form)
    }
  },
  modules: {
  }
})
复制代码

const mapForm = () => {
  // 返回可读可写的表单弹窗状态
  const formState = () => {
    return store.state.formState
  }
  // 返回只读的表单弹窗状态
  const getFormState = () => {
    return readonly(store.state.formState)
  }
  // 打开弹窗
  const openForm = () =>{
    store.commit('setFormState', { isOpen: true})
  }
  // 关闭弹窗
  const closeForm = () =>{
    store.commit('setFormState', { isOpen: false})
  }
  // 设置添加数据
  const addData = () =>{
    store.commit('setFormState', { 
      isOpen: true,
      id: 0,
      editState: 'add'
    })
  }
  // 设置修改状态
  const updateData = (id) =>{
    store.commit('setFormState', { 
      isOpen: true,
      id: id,
      editState: 'update'
    })
  }
  // 设置只读状态
  const showData = (id) =>{
    store.commit('setFormState', { 
      isOpen: true,
      id: id,
      editState: 'show'
    })
  }
  // 异步获取数据
  const loadData = (id) =>{
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        store.commit('setFormState', { 
          model: {
            title: '假装异步获取了数据'
          }
        })
        resolve('成功了！') 
      }, 1000);
    })
  }
  return {
    formState, // 可读写状态
    getFormState, // 只读状态
    openForm, // 打开弹窗
    closeForm, // 关闭弹窗
    addData, // 添加新纪录并且打开弹窗
    updateData, // 修改记录并且打开弹窗
    showData, // 显示数据并且打开弹窗
    loadData // 异步加载数据
  }
}
export default mapForm
复制代码

const { getFormState, loadData } = mapForm()
    const formState = getFormState()
    // 用于绑定表单的model
    const model = reactive({
      title: ''
    })
    watch(() => formState.id ,(v1, v2) => {
      if (v1 === 0) {
        // 添加状态，重置model
        model.title = ''
      } else {
        // 修改或者只读状态，异步加载数据
        // 另一种加载状态，这个成功了。
        const loading = ElementPlus.ElLoading.service({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.1)'
        })
        loadData().then((msg) => {
          // 加载成功的提示
          ElementPlus.ElMessage.success({
            message: msg,
            type: 'success'
          })
          // 设置model数据
          Object.assign(model, formState.model)
          // 关闭加载状态
          loading.close()
        })
      }
复制代码