在 Vue 3 中使用 vuex

Question

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

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

但是，我已经看到几个根本不使用 Vuex 的 Vue 3 代码示例，而是它们对 get/set 应用程序中需要的 currentUser 执行类似的操作，例如在导航栏中组件。

composables/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>

看来我可以使用这些小函数直接从数据库中获取数据，而无需使用我发现有点复杂的 Vuex 模式。

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

Answer 1

简答 - 您不需要它。

长答案 - 视情况而定。

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

一次 app-init/login 还是每次每个组件都挂载？

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

在 Vue 3 中使用 vuex

Using vuex with Vue 3

firebase

vue.js

vuex

vuejs3