How to properly use store in nuxt.js?

@daisha 

In Nuxt.js, the store directory is used to manage the state of your application with Vuex. Here are the steps to properly use the store in Nuxt.js:

1. Create a store directory: In your Nuxt.js project, create a directory named store in the root of your project.
2. Create a Vuex store module: Inside the store directory, create a file for each Vuex store module. For example, you can create a file named index.js for the root store module.
3. Define the state, mutations, actions, and getters: In each store module file, define the state, mutations, actions, and getters that you need to manage the state of your application.
4. Register the store modules: In the nuxt.config.js file, configure Nuxt.js to use the Vuex store by adding the store property with the value pointing to the store directory.

1
2
3
4

export default {
  // Other Nuxt.js configuration options
  store: '~/store'
}

1. Access the store in your components: You can access the Vuex store in your components by using the $store property that is injected by Nuxt.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<template>
  <div>
    <p>{{ $store.state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}
</script>

By following these steps, you can properly use the store in Nuxt.js to manage the state of your application using Vuex.