firebase使用_如何使用Vuex和Firebase管理用户状态

firebase使用

by Gareth Redfern

加雷斯·雷德芬(Gareth Redfern)

如何使用Vuex和Firebase管理用户状态 (How to Manage User State With Vuex and Firebase)

This tutorial walks through adding Vuex to a simple Vue.js Firebase app. We use Vuex to manage the logged in user state and display protected content.

本教程将逐步介绍如何将Vuex添加到简单的Vue.js Firebase中 应用程式。 我们使用Vuex来管理登录的用户状态并显示受保护的内容。

Building on top of the previous tutorial, we will now look at how we can handle storing logged in users. When a user logs in we need a way to be able to store their details and check them from our routes and components.

在上一个教程的基础上 ，我们现在将研究如何处理已登录用户的存储。 用户登录后，我们需要一种方法来存储他们的详细信息，并从我们的路线和组件中对其进行检查。

The data store will need to be in one place so that all routes and components can have the data flow down to them. When a user logs out we will need to pass that information back up from a component to the store.

数据存储区将需要放在一个地方，以便所有路由和组件都可以将数据流向下传递到它们。 当用户注销时，我们将需要将该信息从组件传递回商店。

Vuex allows us to do what we need. It provides a store where all the shared data can live. Each component can then use and update that single data store. Let’s start by adding a store folder to our site and create a store.js file. We will need to pull in the Vuex library from NPM and then use it in our app (the project files already do this).

Vuex允许我们做我们需要的事情。 它提供了一个存储所有共享数据的存储区。 然后，每个组件都可以使用和更新该单个数据存储。 首先，将一个store文件夹添加到我们的站点并创建一个store.js文件。 我们将需要从NPM中提取Vuex库，然后在我们的应用程序中使用它( 项目文件已经做到了)。

With Vuex installed we then include it in our store.js file and tell Vue that we want to use it. Now we will create the store using export const = new Vue.Store(). Pass in the state property as an object where we add all the properties our app requires at the store level. With the store exported we can import it in our main.js file and then add it to the Vue instance. The store data will now be available for us to use in our app using :

安装Vuex之后，我们将其包含在store.js文件中，并告诉Vue我们要使用它。 现在，我们将使用export const = new Vue.Store()创建商店。 将state属性作为对象传递，在其中添加应用程序在商店级别需要的所有属性。 导出商店后，我们可以将其导入到main.js文件中，然后将其添加到Vue实例中 。 现在，商店数据将可供我们在以下应用中使用：

this.$store.state.propertyName

this.$store.state.propertyName

使用吸气剂获得状态 (Using Getters to Get the State)

Accessing the store directly using this.$store.state.propertyName is not very DRY. It would be much better if you could call a method which gets our properties for us. You would also use this method to perform extra calculations if required. This is where getters come to our rescue.

使用this.$store.state.propertyName直接访问商店 不是很干。 如果您可以调用一个为我们获取属性的方法，那就更好了。 如果需要，您还可以使用此方法执行额外的计算。 这就是吸气剂帮助我们的地方。

Vuex allows us to define “getters” in the store. You can think of them as computed properties for stores. Like computed properties, a getter’s result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.

Vuex允许我们在商店中定义“获取器”。 您可以将它们视为商店的计算属性。 像计算的属性一样，getter的结果将基于其依赖项进行缓存，并且仅在其某些依赖项发生更改时才重新评估。

We add getters to our store.js file in the store instance. They are set as methods on the getters object. Here we have access to our state using the state argument:

我们将getters添加到store实例中的store.js文件中。 它们被设置为getters对象上的方法。 在这里，我们可以使用state参数访问状态：

getUser: (state) => { return state.user; } // ES6 function

getUser: (state) => { return state.user; } // ES6 funct getUser: (state) => { return state.user; } // ES6 funct

This simple getter returns our user property from the state. We can now use it in any of our components by calling:

这个简单的getter从状态返回我们的用户属性。 现在，我们可以通过调用以下命令在我们的任何组件中使用它：

this.$store.getters.getUser;

this.$store.getters.getUser;

While the example here is very simple, it shows how you can now reuse this code throughout our app. If you need to change how that method works, you only change it in one place.

尽管此处的示例非常简单，但它说明了如何在我们的应用程序中重复使用此代码。 如果需要更改该方法的工作方式，则只需在一个地方进行更改。

使用变异来改变状态 (Using Mutations to Change the State)

It is also a good idea to have a single place to change the state of our store. That way components can manipulate the state and update all instances.

在一个地方更改我们商店的状态也是一个好主意。 这样，组件可以操纵状态并更新所有实例。

Mutations are what Vue uses to perform these tasks. We add mutations to our store.js file in the store instance. Components run these methods to update the state across the app. They can then listen for these changes through the getters we have set.

变异是Vue用于执行这些任务的工具。 我们将变异添加到商店实例中的store.js文件中。 组件运行这些方法以更新整个应用程序的状态。 然后，他们可以通过我们设置的吸气剂监听这些变化。

In our app, we create a mutation that reaches out to Firebase and sets the current logged in user. If there isn’t anybody logged in then the Firebase, auth method returns null.

在我们的应用程序中，我们创建一个可以连接到Firebase的突变，并设置当前登录的用户。 如果没有人登录，则Firebase auth方法将返回null。

setUser: state => { state.user = Firebase.auth().currentUser; }

setUser: state => { state.user = Firebase.auth().currentUser ; }

Our app can now have one single place to check for logged in users. All components can use this to access user details and load the relevant UI.

现在，我们的应用可以在一个地方检查登录的用户。 所有组件都可以使用它来访问用户详细信息并加载相关的UI。

使用动作提交突变 (Using Actions to Commit Mutations)

The final part of this Vuex journey is to understand how actions work. Mutations can only run synchronously, we actually want this behavior from them. By running a synchronous method you can reliably know that it will change the state when you need it to.

Vuex旅程的最后一部分是了解动作的工作方式。 变异只能同步运行，我们实际上希望它们具有这种行为。 通过运行同步方法，您可以可靠地知道它将在需要时更改状态。

Suppose we want to make a call to a 3rd party API though, how would we do that? We add an action to commit a mutation only when the asynchronous method is complete. That way we can run asynchronous methods but only commit their state once they have finished.

假设我们想调用第三方API，我们该怎么做？ 我们添加了仅当异步方法完成时才提交突变的操作。 这样，我们可以运行异步方法，但仅在完成后才提交它们的状态。

Let’s have a look how we do this in our app.

让我们看看我们如何在应用程序中执行此操作。

We trigger actions with the store.dispatch method. In our App.js component, when the Vue instance is first created, we fire the setUsermethod. This then executes the this.$store.dispatch(‘setUser’); action in our store.js file. Let’s now look at the setUser action which is set as a method.

我们使用store.dispatch方法触发动作。 在App.js组件中，首次创建Vue实例时，我们将触发setUser方法。 然后执行this.$store.dispatch('setUser'); 我们store.js文件中的操作。 现在让我们看一下设置为方法的setUser操作。

setUser: context => { context.commit(‘setUser’); }

setUser: context => { context.commit('setUser') ; }

Here we pass in the context that is available from Vuex and gives us access to the commit method. The commit method then takes the mutation method you would like to run. In our case setUser. Our mutation method is named the same as the setUser action but it doesn’t have to be.

在这里，我们通过context Vuex提供了该功能，使我们可以访问commit方法。 然后，commit方法将采用您要运行的mutation方法。 在我们的例子中是setUser 。 我们的变异方法的名称与setUser动作相同，但不必如此。

全部放在一起 (Putting it all Together)

The diagram above summarizes how the 3 key parts of Vuex work together to serve data to our components. For this tutorial, Vuex may well be overkill.

上图总结了Vuex的3个关键部分如何协同工作以将数据提供给我们的组件。 对于本教程，Vuex可能会过大。

Yet, it solved the problem of knowing when a user is signed-in so that we can display links in the navigation. Take a look at the Header.vue component.

但是，它解决了知道用户何时登录的问题，以便我们可以在导航中显示链接。 看一下Header.vue组件。

Here we are displaying links depending on if a user is signed-in. All we need to do is add v-if=”!user” to each of our router-link components. The uservariable is a computed property, it returns the user object or nullif someone is signed-in or not.

在这里，我们根据用户是否登录显示链接。 我们需要做的就是将v-if=”!user”到我们的每个router-link组件中。 user变量是一个计算的属性，它返回用户对象，如果有人未登录，则返回null 。

附加阅读 (Additional Reading)

• Understanding Vue Lifecycle Hooks

  了解Vue生命周期挂钩

• Application Structure

  应用结构

翻译自: https://www.freecodecamp.org/news/managing-user-state-with-vuex-firebase-77eebc64f546/

firebase使用