Vue 3 Getting Started

Posted on  by admin

Vuex is a state-management system following the Flux pattern. It lets us create a global store and a unidirectional data flow across our Vue 3 app. While Vue 3’s reactivity library makes it easier to create our own data store solutions, Vuex is still a great tool since it comes with built-in DevTools, documentation, and a community to help troubleshoot.

In this article, we’ll learn how to…. Add Vuex to our Vue 3 project. Create a basic store . Look at how to use Vuex in the Composition API.

  • Let’s jump right in. Vuex is a great solution when your app requires complex shared data between components.
  • Great - now we’re all set up to build our store.
  • The first thing we want to do is give our Vuex store a state.
  • And Vuex uses a single state tree - meaning that a single object serves as our app's source of truth.
  • Then, inside any component of our app, we can access our state through our Vuex store.

Once we have access to our store, we can access our state, but in order to maintain reactivity, we want to use a computed property to do this.

How to create a Vue 3 app

Fantastic - if we look at our page now, we’ll see our component properly pulling in our value through Vuex.

So we have to create a computed property for each piece of state that we want to use in our component.

This can get tedious but luckily, Vuex gives us a mapState helper that can save us some time. We can give it either a string array with the state properties we want or an object where we perform some custom mappings.

We can follow these same steps (access our store, create a computed property) to access our Vuex state using Vue 3’s Composition API. In the Composition API, we can use useStore from Vuex to do this.

One thing to note is that using the different Vuex mappers gets a little tricky when we’re working with the Composition API (which I prefer to). Here’s a great package that helps out with this.

We can install it with npm install [email protected] (next for Vue 3) and then map our state using the useState helper. This takes an array of property names that we want from our Vuex state and returns and object with all of these values as reactive computed properties.

Breaking it down

Alright, so we have access to our state from our component, but what if we wanted to change that?

  • In Vuex, mutations are the only way to make changes to our state.
  • Think of these like events where we register a function handler with a string.
  • Importantly, a mutation must be synchronous!!!

Because when we use DevTools, we want to track a before and after screenshot of our data. This is impossible if our mutation is happening asynchronously. A Vuex mutation can take 2 arguments:. The current Vuex state. An optional payload that we can use to pass data to our mutation.

Wrapping Up

Then, we can trigger this mutation handler from anywhere in our app to update our state. We cannot call the mutations directly. There are two ways to trigger mutations, we can either use a two argument (string, payload) format or a single argument where we define the type of mutation in the object-style commit.

Here’s what committing mutations looks like calling `store.commit`. So whenever our button is clicked, we want to trigger INCREMENT_COUNT and increase the value of state by our payload.

To trigger Vuex mutations, we want to call store.commit, but a great practice is to map your mutations to component methods using mapMutations that work similar to mapState that we saw with state.

But we can also use our Vuex Composition Helpers library here too. An important note is that similar to useState, useMutations accepts an array of key Strings and returns an object containing all of the functions that we specified.

We can use object destructuring with the exact name of our mutation to access the mutations from our store. Vuex actions are similar to mutations except they don't directly mutate the state, instead they commit mutations.

These are necessary because mutations must be synchronous. However, in actions, we can perform asynchronous operations (like API calls) and then mutate the state afterwards using mutations. An action takes two properties:. Context - which contains the details of our store. Payload - where we can pass data.

How to learn Vue 3

Vuex actions can be triggered using store.dispatch("actionName", payload). If we take a look at Vue dev tools, we get a good idea of the difference between actions and mutations. As we can see, actions log both their start and end times, while mutations are logged as singular events.

This is because although actions may be overlapping (due to API response times, etc), mutations are synchronous so we’re guaranteed to know the exact state before and after a mutation.

So, if we were to mimic an asynchronous method with a setTimeout, our app will still work as intended will only one mutation happening at a time.

I think you’re starting to get the drill here based on how we mapped our state and mutations, so I’ll keep it short.

Vuex Getters

In the Options API, we can use mapActions. And in the Composition API, we can use useActions.

The final core piece of Vuex is getters. We can think of Vuex Getters as computed properties within our store. Getters allow us to derive a value from our Vuex state. This is useful for creating reusable properties that can be used across your entire app. They receive two arguments.

state - which we can use to derive our value. getters - other getters inside of our store.

We can then access this getter in the rest of our app wherever we have access to our store. Getters can also return a function that takes any sort of argument. This is useful when we want to query/filter based on a specific value. For example, we need to see if count is greater than 10. Similar to state, we can map our getters into a component's local computed properties.

In the Options API…. And in the Composition API…. Although this is by no means a comprehensive list of all the features available in Vuex, it’s a great start to complex state management in Vue 3. I highly recommend reading over the Vuex 4 (which is the release for Vue 3) documentation to learn more about the fundamentals behind Vuex. But I hope this helped, and happy coding! In this article, you’ll learn the fundamentals of Vue.js.

Even though the article uses Vue 3, the fundamentals apply to older Vue versions too.

Mapping our Vuex Getters

We’ll cover how to:. create a Vue application with Vue CLI.

use conditional rendering. make use of dynamic CSS. handle user inputs and events. use methods and computed properties. use HTML attribute binding. We’ll start by creating a skeleton application with the CLI. The Vue command-line interface allows us to create and configure new Vue projects from scratch.

That is, instead of adding packages and configurations ourselves, the CLI does that for us. Let’s install the Vue command-line interface. The tutorial assumes you don’t have Vue CLI installed on your machine. To install it, run the following command:. Alternatively, you can install it using Yarn as follows:. Once you’ve run any of the above commands, the installation starts, and it will take a few seconds or minutes. Once the installation finishes, you can create projects with the following command:. Once we’ve run the vue create command, we’ll be prompted with a handful of questions.

The purpose of these questions is to configure the project to suit our needs. Figure 1: The Vue CLI welcome screen. Figure 1 above shows the welcome screen we get when we run vue create your-project-name.

We then have to choose between three different options:. create a default Vue 2 project. create a default Vue 3 project. manually select features. The first two options will install a default Vue project for us. However, we don’t want a default project. For this tutorial, we’ll manually select the features for our project.

Once we choose the third option, we’ll get a series of questions.

Conditional Rendering

Figure 2 above illustrates what we see when we choose the third option — manually select features.

We can pick what features we need in our project, such as:. adding unit and E2E testing to our project. choosing a linter/formatter for the project.

adding options such as Vuex, TypeScript, Router and so on . After that, we’re prompted to choose a Vue version for our project.

For this tutorial, I recommend choosing Vue 3, as pictured below.

Figure 3: Choosing a Vue version in Vue CLI.

Lastly, we’ll need to answer more questions based on the features we select in the first step, as shown earlier in Figure 2. Before going further, I want to make sure we’re on the same page:.

Run vue create vue3-fundamentals in your terminal. Choose “manually select features”. Untick all features except Babel. For this tutorial, we don’t need any extra features. Choose Vue version 3. Choose “In dedicated config files” when it asks you where to place the config for Babel, and so on.

Don’t save the preset for future projects. After following the above steps, the project structure should look like the one in Figure 4 below. That’s it with the project configuration! Now we’re ready to work on it and learn Vue! If you want to see a more comprehensive article about the CLI, check this Vue CLI article.

Organizing your Composition Functions

There are some things we don’t need in the application. First of all, go to src >components and delete the HelloWorld.vue component.

Now go to the App.vue file and remove all the references of HelloWorld from the file. Also, remove the image with the Vue logo. Lastly, modify the export default {} code block. See the complete code of App.vue below:. Set up a title property and display it in the template.

The first concept we’ll cover is how to render lists in a Vue application.

However, before we can do that, we need a list. Open the file App.vue and add the following array:.