forked from vuejs/vuex
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(ru): add migrating-to-4-0-from-3-x.md
- Loading branch information
Amirzhan Aliyev
committed
Dec 18, 2022
1 parent
4babdc6
commit 6a9bdc7
Showing
1 changed file
with
117 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
# Миграция на 4.0 с 3.x | ||
|
||
Почти весь API Vuex 4 остался неизменным по сравнению с Vuex 3. Тем не менее, есть ещё несколько кардинальных изменении, которые необходимо исправить. | ||
|
||
- [Кардинальные изменения](#кардинаnьные-изменения) | ||
- [Процесс установки](#процесс-установки) | ||
- [Поддержка TypeScript](#поддержка-typescript) | ||
- [Сборки теперь согласованы с Vue 3](#сборки-теперь-согnасованы-с-vue-3) | ||
- [Функция `createLogger` экспортируется из основного модуля](#функция-createlogger-экспортируется-из-основного-модуnя) | ||
- [Новые возможности](#новые-возможности) | ||
- [Новая функция композиции "useStore"](#новая-функция-композиции-usestore) | ||
|
||
## Кардинальные изменения | ||
|
||
### Процесс установки | ||
|
||
Чтобы соответствовать новому процессу инициализации Vue 3, процесс установки Vuex изменился. Для создания нового хранилища теперь предлагается использовать недавно представленную функцию createStore. | ||
|
||
|
||
```js | ||
import { createStore } from 'vuex' | ||
|
||
export const store = createStore({ | ||
state () { | ||
return { | ||
count: 1 | ||
} | ||
} | ||
}) | ||
``` | ||
|
||
Чтобы установить Vuex в экземпляр Vue, передайте `store` вместо Vuex. | ||
|
||
```js | ||
import { createApp } from 'vue' | ||
import { store } from './store' | ||
import App from './App.vue' | ||
|
||
const app = createApp(App) | ||
|
||
app.use(store) | ||
|
||
app.mount('#app') | ||
``` | ||
|
||
:::tip ЗАМЕЧАНИЕ | ||
Хотя технически это не является кардинальным изменением, всё ещё можно использовать синтаксис `new Store(...)`, рекомендуется этот подход для согласования с Vue 3 и Vue Router. | ||
::: | ||
|
||
### Поддержка TypeScript | ||
|
||
Vuex 4 удаляет глобальную типизацию для `this.$store` в компоненте Vue для решения [проблемы #994](https://github.com/vuejs/vuex/issues/994). При использовании с TypeScript, теперь нужно объявить собственный модуль расширения. | ||
|
||
Поместите следующий код в проект, чтобы позволить `this.$store` быть корректно типизированным: | ||
|
||
```ts | ||
// 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](./typescript-support.md). | ||
|
||
### Сборки теперь согласованы с Vue 3 | ||
|
||
Следующие сборки сгенерированы для согласования с Vue 3 пакетами: | ||
|
||
- `vuex.global(.prod).js` | ||
- Для непосредственного использования с `<script src="...">` в браузере. Выставляет глобальный Vuex. | ||
- Глобальная сборка построена как IIFE, а не как UMD, и предназначена только для использования напрямую через `<script src="...">`. | ||
- Содержит жёстко запрограммированные ветки prod/dev, а сборка для production предварительно минифицирована. Используйте `.prod.js` файлы для production. | ||
- `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 на стороне сервера (SSR) с `require()`. | ||
|
||
### Функция `createLogger` экспортируется из основного модуля | ||
|
||
В Vuex 3, функция `createLogger` экспортировалась из `vuex/dist/logger` но теперь включена в основной пакет. Функция должна быть импортирована непосредственно из пакета `vuex`. | ||
|
||
```js | ||
import { createLogger } from 'vuex' | ||
``` | ||
|
||
## Новые возможности | ||
|
||
### Новая функция композиции "useStore" | ||
|
||
Vuex 4 представляет новый API для взаимодействия с хранилищем в Composition API. Можно использовать функцию композиции `useStore` для извлечения хранилища внутри компонента `setup` хуком. | ||
|
||
```js | ||
import { useStore } from 'vuex' | ||
|
||
export default { | ||
setup () { | ||
const store = useStore() | ||
} | ||
} | ||
``` | ||
|
||
Больше можно узнать в разделе [Composition API](./composition-api). |