How to create and use nuxtjs vuex store

 

NuxtJS is a free and open-source framework of javascript for web applications based on VueJS, Nodejs, Webpack, and Babel.js. Nuxt is inspired by NextJS based on React which is a similar purpose framework.

NuxtJs create SPA(Single Page Application), PWA(Progressive Web Page), and SSR(Server Side Rendering) applications.

Vuex

Vuex is a javascript library that provides store functionality for VueJS its also used in the NuxtJS with the same definition structure with sum modular structures.

Nuxtjs store creates an index.js blank file to activate the store. If you want to set up your own logic in-store then you can create a store with a modular structure.

Activate Store

In-store, the directory creates an index.js file which is activating NuxtJS store functionality. You also to assign any type of store variable like below I have assigned counter with mutations.

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

This code is activating store in your nuxt projects.

there have some structures usage in the Vuex store:-

1. State: this section defines store variables.
2. Mutations: this section defines store state change function usage in components and performs by committing state.
3. Getters: this section defines store state getting data according to your logic and function inside this section.
4. Actions: this is the same as the mutation section but the difference is that it contains arbitrary asynchronous operations.

Inside nuxt store, you can create a folder for modules with every file related to the Vuex sections otherwise create a single file with all Vuex sections in the same files.

The above example to creates a file name is cart.js inside the store then it's a module and the name is the cart.

And another method creates a new folder inside the store with all Vuex structure files like state.js, mutations.js, getters.js, and actions.js.

Usage of Store

1. If you are assigned store in store/index.js then you can access bellow methods.
   
   

   import { mapMutations } from 'vuex'
   
   export default {
     computed: {
       todos () {
         return this.$store.state.todos
       }
     },
     methods: {
       addTodo (e) {
         this.$store.commit('todos_add', e.target.value)
         e.target.value = ''
       },
       ...mapMutations({
         toggle: 'todos_toggle'
       })
     }
   }

   This store has todos name object and mutations function like todos_add() and todos_toggle.
2. If you have to create a store file like todos.js then the bellow example to access store data.
   
   

   import { mapMutations } from 'vuex'
   
   export default {
     computed: {
       todos () {
         return this.$store.state.todos.list
       }
     },
     methods: {
       addTodo (e) {
         this.$store.commit('todos/add', e.target.value)
         e.target.value = ''
       },
       ...mapMutations({
         toggle: 'todos/toggle'
       })
     }
   }

   In this example, you have to create todos.js with the state object list, mutations function add(), toggle().
3. And another is to create a todos folder with files state.js, mutations.js, getters.js, and actions.js withs its functions.