在 Vue 3 中使用 vuex答案

【问题标题】：Using vuex with Vue 3在 Vue 3 中使用 vuex
【发布时间】：2021-11-04 16:59:55
【问题描述】：

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

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

但是，我看到几个 Vue 3 代码示例根本不使用 Vuex，而是在应用程序中任何需要的地方（例如在导航栏组件中）执行类似的操作来获取/设置 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>

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

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

【问题讨论】：

标签： firebase vue.js vuex vuejs3

【解决方案1】：

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

长答案 - 视情况而定。

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

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

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

【讨论】：