vue3 使用pinia ，单击登录按钮，打开登录窗口后，如果让主页面的数据修改

可以使用Pinia提供的actions功能来实现在登录窗口中修改主页面数据的功能。具体步骤如下：

1. 在主页面中创建一个存储库，用于管理主页面的数据。

import { createPinia } from 'pinia'

const pinia = createPinia()

pinia.store('main', {
  state: () => ({
    username: '',
    isLoggedIn: false
  }),
  actions: {
    setUsername(username) {
      this.username = username
    },
    setLoggedIn(isLoggedIn) {
      this.isLoggedIn = isLoggedIn
    }
  }
})

2. 在登录窗口组件中，通过Pinia的inject方法来获取主页面的存储库。

import { defineComponent, inject } from 'vue'
import { useMainStore } from '@/store/main'

export default defineComponent({
  setup() {
    const mainStore = useMainStore()

    const handleLogin = () => {
      // 在这里调用登录接口，并获取登录用户的信息
      const username = '张三'
      const isLoggedIn = true

      // 调用主页面存储库的actions来修改主页面数据
      mainStore.setUsername(username)
      mainStore.setLoggedIn(isLoggedIn)

      // 关闭登录窗口
      // ...
    }

    return {
      handleLogin
    }
  }
})

3. 在主页面组件中，通过Pinia的inject方法来获取主页面的存储库，并使用计算属性来绑定主页面的数据。

import { defineComponent, inject } from 'vue'
import { useMainStore } from '@/store/main'

export default defineComponent({
  setup() {
    const mainStore = useMainStore()

    return {
      username: computed(() => mainStore.username),
      isLoggedIn: computed(() => mainStore.isLoggedIn)
    }
  }
})

这样，在登录窗口中调用主页面存储库的actions来修改主页面数据时，主页面的数据会自动更新。