时间戳

首页 > 解决方案 > 在 Vue 3 中使用 vuex

firebase - 在 Vue 3 中使用 vuex

问题描述

去年我花了一些时间学习 Vue 2。我真的很喜欢这个框架，但没有推进一个项目。我现在有时间做一个项目，但我想将 Vue 3 与组合 API 一起使用。我将使用 Firebase 作为后端。我见过关于是否使用 Vuex 的相互冲突的技术。

例如，我想在全局状态下存储一个“currentUser”对象，该对象可以从应用程序中的任何组件访问。通常，它会使用 Vuex 来完成。我有一个 getter 来返回对象，一个异步操作来从 firebase 获取数据和一个突变来设置状态。

但是，我已经看到了几个根本不使用 Vuex 的 Vue 3 代码示例，而是在需要的地方（例如在导航栏组件中）执行类似这样的操作来获取/设置应用程序中的 currentUser。

可组合物/getUser.js

import { ref } from 'vue'
import firebase from 'firebase/app'

// refs
const user = ref(firebase.auth().currentUser)

// auth changes
firebase.auth().onAuthStateChanged(_user => {
  console.log('User state change. Current user is:', _user)
  user.value = _user
});

const getUser = () => {
  return { user } 
}

export default getUser

使用上面的这段代码，我可以导入 getUser.js 并使用这样的代码访问当前登录的用户。此外，用户对象现在是反应式的：

<script>
import getUser from '../composables/getUser'

export default {
  setup() {
    const { user } = getUser()
    return { user }
  }
}
</script>

看来我可以使用这些小功能直接从 db 获取数据，而无需使用 Vuex 模式，我觉得这有点复杂。

所以，我的问题是——如果我开始一个新的 Vue 3 项目，是否可以创建“可组合”函数来获取/设置数据并将它们导入我的组件而不是使用 Vuex？这种方法有什么缺点吗？还是我应该坚持使用 Vuex？

标签： firebasevue.jsvuexvuejs3

解决方案

简短的回答 - 你不需要它。

长答案 - 这取决于。

这主要取决于您的应用程序以及您在组件中使用“currentUser”数据的频率。如果它在 2 个或更多组件中，您希望多久执行一次从后端实际获取的操作？

一次在 app-init/login 上还是每次安装每个组件时？

（可能一次）
它需要反应吗？如果是，那么您可能会使用集中式数据模式、您自己的或库。考虑到这一点，使用 Vuex 可能更简单。

推荐阅读