Миграция на версию 4.0 из 3.x

Практически все API Vuex 4 остались неизменными по сравнению с Vuex 3. Однако есть несколько критических изменений, которые необходимо исправить.

• Критические изменения
  • Процесс установки
  • Поддержка TypeScript
  • Пакеты теперь соответствуют Vue 3
  • Функция "createLogger" экспортируется из основного модуля
• Новые возможности
  • Новая функция композиции "useStore"

Критические изменения

Процесс установки

В соответствии с новым процессом инициализации Vue 3 процесс установки Vuex изменился. Для создания нового хранилища пользователям рекомендуется использовать новую функцию createStore.

import { createStore } from 'vuex'

export const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

Для установки Vuex в экземпляр Vue передайте store вместо Vuex.

import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'

const app = createApp(App)

app.use(store)

app.mount('#app')

Поддержка TypeScript

Vuex 4 удаляет свои глобальные типы для this.$store внутри компонента Vue для решения проблемы #994. При использовании с TypeScript вы должны объявить свою собственную расширяющую модуль.

Разместите следующий код в своём проекте, чтобы правильно настроить типизацию this.$store.

// vuex-shim.d.ts

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // Declare your own store states.
  interface State {
    count: number
  }

  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

Вы можете узнать больше в разделе Поддержка TypeScript.

Пакеты теперь соответствуют Vue 3

Следующие пакеты сгенерированы для соответствия пакетам Vue 3:

• vuex.global(.prod).js
  • Для прямого использования с <script src="..."> в браузере. Экспортирует глобальную переменную Vuex.
  • Глобальный сборка выполняется как IIFE, а не UMD, и предназначена только для прямого использования с <script src="...">.
  • Содержит жёстко заданные ветки prod/dev, и prod сборка предварительно сжата. Используйте файлы .prod.js для производства.
• vuex.esm-browser(.prod).js
  • Для использования с импортами модулей ES (включая поддержку модулей в браузерах через <script type="module">).
• vuex.esm-bundler.js
  • Для использования с такими сборщиками, как webpack, rollup и parcel.
  • Оставляет ветки prod/dev с process.env.NODE_ENV условиями (должны быть заменены сборщиком).
  • Не поставляется с сжатыми сборками (что должно быть сделано вместе с остальной частью кода после сборки).
• vuex.cjs.js
  • Для использования в Node.js при рендеринге на стороне сервера с require().

createLogger функция экспортируется из основного модуля

В Vuex 3 функция createLogger экспортировалась из vuex/dist/logger, но теперь она включена в основной пакет. Функция должна импортироваться непосредственно из пакета vuex.

import { createLogger } from 'vuex'

Новые возможности

Новая функция композиции useStore

Vuex 4 представляет новый API для взаимодействия с хранилищем в композиционном API. Вы можете использовать функцию композиции useStore для извлечения хранилища внутри компонента setup.

import { useStore } from 'vuex'

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

Вы можете узнать больше в разделе Композиционный API.