Vuex Pratical Implementation In Nuxt
Tags: nuxt, vuex, vue
Published: 2022-01-15 23:04:39

---
title: Vuex Pratical Implementation In Nuxt
published: true
description: Working with Nuxt Store Directory, commit and dispatch in components.
tags: Nuxt, Vuex, Vue
//cover_image: https://direct_url_to_image.jpg
---

<div id='introduction'/>

**INTRODUCTION**

In this post we'll be looking into practical ways of working with **Vuex in Nuxt**, and setting up nuxt project.

<br>
<div id='nuxt-installation'/>


**NUXT INSTALLATION**

We have different ways of setting up Nuxt project

- Using create-nuxt-app
- Manual Installation

to move quickly use **create-nuxt-app**, to get started:

```
// Yarn
yarn create nuxt-app <project-name>

// Npm
npm init nuxt-app <project-name>

//Npx
npx create-nuxt-app <project-name>
``` 
questions on tools and packages will be asked after answering all, dependencies will be installed then you can do the following:

```
// yarn
cd <project-name>
yarn dev

//npm
cd <project-name>
npm run dev
``` 
 for more info on the installation process checkout the Nuxt official Docs [Nuxt Installation](https://nuxtjs.org/docs/get-started/installation) 

<br>
<div id='vuex-in-nuxt'/>
**SETTING UP VUEX IN NUXT**

Before we move further we've different ways to setup vuex in Nuxt [Checkout Josh Deltener 4 Ways To Setup Vuex in Nuxt](https://masteringnuxt.com/blog/four-ways-to-setup-vuex-in-nuxt).

Going further we'll be working with the third method from **Josh Deltene's Four ways to setup Vuex in NUXT which is Namespaced, one file**.

**Namespaced, one file:** Inside our store directory we'll be having a unique state feature named file for example: auth.js, cart.js, payment.js and order.js inside where we'll be having our state, actions, mutations and getters which will be exported.

![namespaced-one-file.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1642195245199/xvc0APTX7.png)


```
export const state = () => ({
})

export const mutations = {
}

export const actions = {
}

export const getters = {
}

``` 
<br>
<div id='samg'/>
**SETTING UP state, actions, mutation and getters**

Inside our namespaced file we'll create our state which should always be a function.

```
// State
export const state = () => ({
  paymentMethods: [],
})

``` 
Mutations, actions and getters will be exported as an object

```

// Mutation
export const mutations = {
  SET_PAYMENT_METHODS(state, payload) {
    state.paymentMethods = payload
  },
}

// Action
export const actions = {
  async fetchPaymentMethods({commit}) {
    try {
      let response = await pay(this.$axios).fetchPaymentMethods()
      // we commit the incoming data so as to update the state data
      commit('SET_PAYMENT_METHODS', response.data.data)
    } catch (error) {
    }
  },
}

// Getter
export const getters = {
  getPaymentMethods: (state) => state.paymentMethods,
}


``` 
<br>
<div id='store-data'/>
**ACCESSING STORE DATA IN OUR COMPONENT**
Firstly to access store data in our component we need to import vuex inside the script tag

```
<script>
import {mapGetters} from "vuex"
</script>
``` 
to access a data from the store state or getter we'll do the following in our computed property

```
computed: {
// getters
    ...mapGetters({
      // getPaymentMethods we created in the getter above
      paymentMethods: 'payment/getPaymentMethods',
    }),

// state
     paymentMethods(){
        return this.$store.state.payment.paymentMethods
     }
  },
``` 
<br>
** EXECUTING ACTIONS AND MUTATIONS**
<div id='actions-mutations'/>

```
this.$store.dispatch('payment/fetchPaymentMethods')

this.$store.commit('payment/SET_PAYMENT_METHODS')
``` 

<br>
** SUMMARY **
<div id='summary'/>
So far, we've seen practical examples of how to setup Nuxt project,  work with vuex in our Nuxt project and enjoy the out of box vuex setup.

We still have some other interesting features which we'll be sharing together, stick around for more.

I hope you find this post helpful and if you do, you can follow me on [Twitter](https://twitter.com/eeskay01)