Skip to content

[RU] Update translation #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 12, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 58 additions & 1 deletion ru/data.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export default {

computed: {
// отображаем элемент из состояния хранилища.
items () {
item () {
return this.$store.state.items[this.$route.params.id]
}
}
Expand Down Expand Up @@ -254,6 +254,63 @@ Vue.mixin({
})
```

## Разделение кода хранилища

В большом приложении хранилище Vuex будет скорее всего разделено на несколько модулей. Конечно, также можно разделить код этих модулей на соответствующие фрагменты компонента маршрута. Предположим, что у нас есть следующий модуль хранилища:

``` js
// store/modules/foo.js
export default {
namespaced: true,
// ВАЖНО: state должен быть функцией, чтобы
// модуль мог инстанцироваться несколько раз
state: () => ({
count: 0
}),
actions: {
inc: ({ commit }) => commit('inc')
},
mutations: {
inc: state => state.count++
}
}
```

Мы можем использовать `store.registerModule` для lazy-регистрации этого модуля в хуке `asyncData` компонента маршрута:

``` html
// внутри компонента маршрута
<template>
<div>{{ fooCount }}</div>
</template>

<script>
// импортируем модуль здесь, а не в `store/index.js`
import fooStoreModule from '../store/modules/foo'

export default {
asyncData ({ store }) {
store.registerModule('foo', fooStoreModule)
return store.dispatch('foo/inc')
},

// ВАЖНО: избегайте дублирования регистрации модуля на клиенте
// когда маршрут посещается несколько раз.
destroyed () {
this.$store.unregisterModule('foo')
},

computed: {
fooCount () {
return this.$store.state.foo.count
}
}
}
</script>
```

Поскольку модуль теперь является зависимостью компонента маршрута, он будет перемещён в асинхронный фрагмент компонента маршрута с помощью Webpack.

---

Фух, это было много кода! Это связано с тем, что универсальная загрузка данных является, вероятно, самой сложной проблемой в приложении с рендерингом на стороне сервера, и таким образом мы закладываем хороший фундамент для облегчения дальнейшей разработки. После создания такой заготовки, создание отдельных компонентов будет приятным занятием.
2 changes: 2 additions & 0 deletions ru/universal.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@

Так как динамических обновлений нет, из всех хуков жизненного цикла будут вызваны только `beforeCreate` и `created` во время серверного рендеринга (SSR). Это означает, что код внутри любых других хуков жизненного цикла, таких как `beforeMount` или `mounted`, будет выполняться только на клиенте.

Стоит ещё отметить, что вам следует избегать кода, который производит глобальные побочные эффекты (side effects) в хуках `beforeCreate` и `created`, например устанавливая таймеры с помощью `setInterval`. В коде на стороне клиента мы можем установить таймер, а затем остановить его в `beforeDestroy` или `destroyed`. Но, поскольку хуки уничтожения не будут вызываться во время SSR, таймеры останутся навсегда. Чтобы избежать этого, переместите такой код в `beforeMount` или `mounted`.

## Доступ к специализированному API платформы

Универсальный код не может использовать API специализированное для какой-то конкретной платформы (platform-specific APIs), потому что если ваш код будет использовать глобальные переменные браузеров `window` или `document`, то возникнут ошибки при выполнении в Node.js, и наоборот.
Expand Down