link: '/ssr/',
},
{
- text: 'Nuxt.js',
+ text: 'Nuxt',
link: '/ssr/nuxt.html',
},
],
link: '/zh/ssr/',
},
{
- text: 'Nuxt.js',
+ text: 'Nuxt',
link: '/zh/ssr/nuxt.html',
},
],
/>
:::tip
-If you are using **Nuxt.js,** you need to read [**these instructions**](./nuxt.md) instead.
+If you are using **Nuxt,** you need to read [**these instructions**](./nuxt.md) instead.
:::
Creating stores with Pinia should work out of the box for SSR as long as you call your `useStore()` functions at the top of `setup` functions, `getters` and `actions`:
## State hydration
-To hydrate the initial state, you need to make sure the rootState is included somewhere in the HTML for Pinia to pick it up later on. Depending on what you are using for SSR, **you should escape the state for security reasons**. We recommend using [devalue](https://github.com/Rich-Harris/devalue) which is the one used by Nuxt.js:
+To hydrate the initial state, you need to make sure the rootState is included somewhere in the HTML for Pinia to pick it up later on. Depending on what you are using for SSR, **you should escape the state for security reasons**. We recommend using [devalue](https://github.com/Rich-Harris/devalue) which is the one used by Nuxt:
```js
import devalue from 'devalue'
-# Nuxt.js
+# Nuxt
<MasteringPiniaLink
href="https://masteringpinia.com/lessons/ssr-friendly-state"
• **PiniaVuePlugin**: `Plugin`
Vue 2 插件,必须安装该插件才能使 pinia 工作。
-注意,**如果你使用的是 Nuxt.js,那你不需要这个插件**。请使用 `buildModule` 代替:
+注意,**如果你使用的是 Nuxt,那你不需要这个插件**。请使用 `buildModule` 代替:
<https://pinia.vuejs.org/zh/ssr/nuxt.html>
**`Example`**
还有一个可以从一个 store 类型中提取 _getter_ 的 `StoreGetters` 类型。你也可以且**只可以**通过扩展 `DefineStoreOptions` 或 `DefineSetupStoreOptions` 类型来扩展 _setup store_ 或 _option store_ 的选项。
:::
-## Nuxt.js %{#nuxt-js}%
+## Nuxt %{#nuxt}%
当[在 Nuxt 中使用 pinia](../ssr/nuxt.md) 时,你必须先创建一个 [Nuxt 插件](https://nuxt.com/docs/guide/directory-structure/plugins)。这样你才能访问到 `pinia` 实例:
:::
-### Nuxt.js 2
+### Nuxt 2
-如果你使用的是 Nuxt.js 2,其类型会稍有不同:
+如果你使用的是 Nuxt 2,其类型会稍有不同:
```ts{3,15-17}
// plugins/myPiniaPlugin.ts
/>
:::tip
-如果你使用的是 **Nuxt.js**,你需要阅读的是[**这些说明文档**](./nuxt.md)。
+如果你使用的是 **Nuxt**,你需要阅读的是[**这些说明文档**](./nuxt.md)。
:::
只要你只在 `setup` 函数、`getter` 和 `action` 的顶部调用你定义的 `useStore()` 函数,那么使用 Pinia 创建 store 对于 SSR 来说应该是开箱即用的:
## State 激活 %{#state-hydration}%
-为了激活初始 state,你需要确保 rootState 包含在 HTML 中的某个地方,以便 Pinia 稍后能够接收到它。根据你服务端所渲染的内容,**为了安全你应该转义 state**。我们推荐 Nuxt.js 目前使用的 [@nuxt/devalue](https://github.com/nuxt-contrib/devalue):
+为了激活初始 state,你需要确保 rootState 包含在 HTML 中的某个地方,以便 Pinia 稍后能够接收到它。根据你服务端所渲染的内容,**为了安全你应该转义 state**。我们推荐 Nuxt 目前使用的 [@nuxt/devalue](https://github.com/nuxt-contrib/devalue):
```js
import devalue from '@nuxt/devalue'
-# Nuxt.js %{#nuxt-js}%
+# Nuxt %{#nuxt}%
<MasteringPiniaLink
href="https://masteringpinia.com/lessons/ssr-friendly-state"