Nuxt.js 3, как запустить с pinia?

Nuxt.js - это фреймворк на основе Vue.js, который позволяет создавать мощные и удобные веб-приложения. Он предлагает разные инструменты и функции, чтобы упростить разработку и повысить производительность приложений.

В Nuxt.js 3 значительно улучшен механизм хранения состояния приложения. В предыдущих версиях, Vuex использовался по умолчанию для этой цели. Однако, в Nuxt.js 3 рекомендуется использовать более современное и эффективное решение - пакет pinia.

Pinia - это новая библиотека для хранения состояния, разработанная специально для Vue 3 и Nuxt.js 3. Она предлагает простой и понятный API для работы с состоянием вашего приложения.

Чтобы запустить Nuxt.js 3 с использованием pinia, вам необходимо выполнить несколько шагов:

1. Установите пакет pinia, добавив его в ваш проект с помощью npm или yarn:

npm install pinia
# или
yarn add pinia

2. Создайте файл store/index.js в корневом каталоге вашего проекта, где вы определите свои состояния, геттеры, мутации и действия, используя pinia:

// store/index.js
import { createPinia } from 'pinia'

export const pinia = createPinia()

export const useStore = pinia.useStore()

// Здесь вы можете определить ваши состояния, геттеры, мутации и действия
export const state = () => ({
  counter: 0
})

export const getters = {
  getCounter: (state) => state.counter
}

export const mutations = {
  increment: (state) => state.counter++,
  decrement: (state) => state.counter--,
}

export const actions = {
  async fetchData({ commit }) {
    // Тут вы можете выполнять асинхронные действия
    const data = await fetch('https://api.example.com/data')
    commit('setData', await data.json())
  }
}

3. Импортируйте и подключите пакет pinia в вашем файле nuxt.config.js:

// nuxt.config.js
import { pinia } from './store/index.js'

export default {
  // ...
  plugins: [
    { src: '~/plugins/pinia.js', mode: 'client' },
  ],
  // Подключаем pinia в качестве плагина
  buildModules: [
    '@nuxtjs/pinia',
  ],
  // ...
  pinia,
}

4. Создайте файл с расширением .js в папке plugins вашего проекта (например, plugins/pinia.js) и подключите pinia к вашему приложению:

// plugins/pinia.js
import { createApp } from 'vue'
import { pinia } from '@/store'

export default function ({ app }) {
  app.use(pinia)
}

5. Теперь вы можете использовать ваше хранилище данных во всем вашем приложении Nuxt.js 3, обращаясь к нему через хук useStore:

<!-- MyComponent.vue -->
<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
  import { useStore } from '@/store'

  export default {
    setup() {
      const store = useStore()

      const counter = computed(() => store.getCounter)

      const increment = () => {
        store.increment()
      }

      const decrement = () => {
        store.decrement()
      }

      return {
        counter,
        increment,
        decrement
      }
    }
  }
</script>

Теперь, когда вы запустите свое приложение Nuxt.js 3, оно будет использовать pinia вместо Vuex для управления состоянием приложения. Вы можете добавлять новые состояния, геттеры, мутации и действия в ваше хранилище и использовать их в компонентах вашего приложения.