You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
В большом приложении хранилище Vuex будет скорее всего разделено на несколько модулей. Конечно, также можно разделить код этих модулей на соответствующие фрагменты компонента маршрута. Предположим, что у нас есть следующий модуль хранилища:
260
+
261
+
```js
262
+
// store/modules/foo.js
263
+
exportdefault {
264
+
namespaced:true,
265
+
// ВАЖНО: state должен быть функцией, чтобы
266
+
// модуль мог инстанцироваться несколько раз
267
+
state: () => ({
268
+
count:0
269
+
}),
270
+
actions: {
271
+
inc: ({ commit }) =>commit('inc')
272
+
},
273
+
mutations: {
274
+
inc:state=>state.count++
275
+
}
276
+
}
277
+
```
278
+
279
+
Мы можем использовать `store.registerModule` для lazy-регистрации этого модуля в хуке `asyncData` компонента маршрута:
280
+
281
+
```html
282
+
// внутри компонента маршрута
283
+
<template>
284
+
<div>{{ fooCount }}</div>
285
+
</template>
286
+
287
+
<script>
288
+
// импортируем модуль здесь, а не в `store/index.js`
289
+
importfooStoreModulefrom'../store/modules/foo'
290
+
291
+
exportdefault {
292
+
asyncData ({ store }) {
293
+
store.registerModule('foo', fooStoreModule)
294
+
returnstore.dispatch('foo/inc')
295
+
},
296
+
297
+
// ВАЖНО: избегайте дублирования регистрации модуля на клиенте
298
+
// когда маршрут посещается несколько раз.
299
+
destroyed () {
300
+
this.$store.unregisterModule('foo')
301
+
},
302
+
303
+
computed: {
304
+
fooCount () {
305
+
returnthis.$store.state.foo.count
306
+
}
307
+
}
308
+
}
309
+
</script>
310
+
```
311
+
312
+
Поскольку модуль теперь является зависимостью компонента маршрута, он будет перемещён в асинхронный фрагмент компонента маршрута с помощью Webpack.
313
+
257
314
---
258
315
259
316
Фух, это было много кода! Это связано с тем, что универсальная загрузка данных является, вероятно, самой сложной проблемой в приложении с рендерингом на стороне сервера, и таким образом мы закладываем хороший фундамент для облегчения дальнейшей разработки. После создания такой заготовки, создание отдельных компонентов будет приятным занятием.
Copy file name to clipboardExpand all lines: ru/universal.md
+2
Original file line number
Diff line number
Diff line change
@@ -12,6 +12,8 @@
12
12
13
13
Так как динамических обновлений нет, из всех хуков жизненного цикла будут вызваны только `beforeCreate` и `created` во время серверного рендеринга (SSR). Это означает, что код внутри любых других хуков жизненного цикла, таких как `beforeMount` или `mounted`, будет выполняться только на клиенте.
14
14
15
+
Стоит ещё отметить, что вам следует избегать кода, который производит глобальные побочные эффекты (side effects) в хуках `beforeCreate` и `created`, например устанавливая таймеры с помощью `setInterval`. В коде на стороне клиента мы можем установить таймер, а затем остановить его в `beforeDestroy` или `destroyed`. Но, поскольку хуки уничтожения не будут вызываться во время SSR, таймеры останутся навсегда. Чтобы избежать этого, переместите такой код в `beforeMount` или `mounted`.
16
+
15
17
## Доступ к специализированному API платформы
16
18
17
19
Универсальный код не может использовать API специализированное для какой-то конкретной платформы (platform-specific APIs), потому что если ваш код будет использовать глобальные переменные браузеров `window` или `document`, то возникнут ошибки при выполнении в Node.js, и наоборот.
0 commit comments