Миграция на 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' {
  // объявляем собственные состояния хранилища
  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="...">.
  • Содержит подготовленные варианты для production/разработки, кроме того сборка для production предварительно минифицирована. Используйте в production файлы *.prod.js.
• vuex.esm-browser(.prod).js
  • Для использования в нативных импортах ES-модулей (в браузере через <script type="module">).
• vuex.esm-bundler.js
  • Для использования с системами сборки, такими как webpack, rollup и parcel.
  • Определение поведения для production/разработки условиями с 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 с хранилищем при использовании Composition API. Можно использовать функцию композиции useStore для извлечения хранилища внутри компонента setup хуком.

import { useStore } from 'vuex'

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

Больше можно узнать в разделе Composition API.