Как получить измененный state из Pinia в Vue3?

В Vue.js 3 была представлена новая библиотека для управления состоянием приложения под названием Pinia. Она очень похожа на Vuex, но предлагает более современный подход к управлению состоянием и является официальным рекомендуемым средством для работы с состоянием в Vue.js 3.

Для получения измененного состояния из Pinia в Vue.js 3 нужно использовать хуки компонента, предоставляемые Pinia. Хуки позволяют получить доступ к состоянию хранилища и отслеживать его изменения.

Для начала, установите Pinia в ваш проект:

npm install pinia

Затем, импортируйте функцию createPinia из пакета pinia и использовите ее для создания экземпляра хранилища. Например, в файле store.js:

import { createPinia } from 'pinia'

export const useStore = createPinia().useStore()

Затем в компоненте, где вам нужно получить и отслеживать изменения состояния, используйте хук useStore:

import { useStore } from './store'

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

    console.log(store.count) // получить текущее значение состояния

    // Отслеживание изменений состояния
    watch(() => store.count, (newValue, oldValue) => {
      console.log(`Состояние count изменилось с ${oldValue} на ${newValue}`)
    })

    return {
      store
    }
  }
}

В этом примере мы импортируем хук useStore из нашего файла хранилища store.js. Затем мы можем получить доступ к состоянию count, используя store.count. Мы также используем функцию watch для отслеживания изменений состояния count.

Обратите внимание, что хук useStore автоматически подписывается на состояние, поэтому вам не нужно явно вызывать метод store.$subscribe.

Таким образом, используя хуки Pinia, вы можете легко получать измененное состояние из Pinia в компонентах Vue.js 3 и реагировать на эти изменения.