Skip to content

Commit

Permalink
docs: add Chinese translation (#338)
Browse files Browse the repository at this point in the history
Co-authored-by: lichong <1546214265@qq.com>
Co-authored-by: PraZ <hi@praz.dev>
  • Loading branch information
3 people authored Oct 8, 2024
1 parent b269d4b commit 42ced53
Show file tree
Hide file tree
Showing 10 changed files with 905 additions and 0 deletions.
2 changes: 2 additions & 0 deletions docs/.vitepress/config/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { defineConfig } from 'vitepress'
import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons'
import { algolia } from './algolia'
import { en } from './en'
import { zh } from './zh'

export default defineConfig({
title: 'Pinia Plugin Persistedstate',
Expand Down Expand Up @@ -71,5 +72,6 @@ export default defineConfig({
lang: 'en',
...en,
},
zh: { label: '简体中文', ...zh },
},
})
99 changes: 99 additions & 0 deletions docs/.vitepress/config/zh.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
import { version } from '../../../package.json'

export const zh: LocaleSpecificConfig<DefaultTheme.Config> = {
description: 'Pinia stores的可配置持久性.',
themeConfig: {
editLink: {
text: '建议对此页面进行更改',
pattern: 'https://github.com/prazdevs/pinia-plugin-persistedstate/edit/main/docs/:path',
},
docFooter: {
prev: '上一页',
next: '下一页',
},

outline: {
label: '页面导航',
},

lastUpdated: {
text: '最后更新于',
formatOptions: {
dateStyle: 'short',
timeStyle: 'medium',
},
},
nav: [
{
text: '指南',
link: '/zh/guide/',
activeMatch: '/zh/guide/',
},
{
text: '框架',
items: [
{ text: 'Nuxt', link: '/zh/frameworks/nuxt' },
{ text: '其他框架', link: '/zh/frameworks/others' },
],
},
{
text: `v${version}`,
items: [
{
items: [{
text: '发行说明',
link: 'https://github.com/prazdevs/pinia-plugin-persistedstate/releases',
}],
},
{
text: '版本',
items: [
{
text: `${version} (Current)`,
activeMatch: '/',
link: '#',
},
{
text: '3.2.2',
link: 'https://github.com/prazdevs/pinia-plugin-persistedstate/tree/v3',
},
{
text: '2.4.0',
link: 'https://github.com/prazdevs/pinia-plugin-persistedstate/tree/v2',
},
{
text: '1.6.3',
link: 'https://github.com/prazdevs/pinia-plugin-persistedstate/tree/v2',
},
],
},
],
},
],
sidebar: [
{
text: '指南',
items: [
{ text: '为什么使用这个插件?', link: '/zh/guide/why' },
{ text: '开始', link: '/zh/guide/' },
{ text: '配置', link: '/zh/guide/config' },
{ text: '局限性', link: '/zh/guide/limitations' },
{ text: '高级用法', link: '/zh/guide/advanced' },
],
},
{
text: '框架',
items: [
{ text: 'Nuxt', link: '/zh/frameworks/nuxt' },
{ text: '其他框架', link: '/zh/frameworks/others' },
],
},
],
footer: {
message: '基于 MIT 许可发布。',
copyright: '版权所有 © 2021 年至今 Sacha Bouillez 及贡献者',
},

},
}
192 changes: 192 additions & 0 deletions docs/zh/frameworks/nuxt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
# 在 Nuxt 中使用

该软件包 `pinia-plugin-persistedstate` 附带一个 Nuxt 模块,可提供开箱即用的 SSR 友好体验。

## 安装

1. 使用你喜欢的包管理器安装依赖项:
::: code-group
```sh [pnpm]
pnpm add pinia-plugin-persistedstate
```
```sh [npm]
npm i pinia-plugin-persistedstate
```
```sh [yarn]
yarn add pinia-plugin-persistedstate
```
:::

1. 将模块添加到 Nuxt 配置中:
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: [
'@pinia/nuxt',
'pinia-plugin-persistedstate/nuxt',
],
})
```

## 用法

在声明您的存储时,将新的 `persist` 选项设置为 `true`

::: code-group
```ts{11} [setup syntax]
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useStore = defineStore(
'main',
() => {
const someState = ref('hello pinia')
return { someState }
},
{
persist: true,
},
)
```
```ts{9} [option syntax]
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: 'hello pinia',
}
},
persist: true,
})
```
:::

## 预配置

Nuxt 模块预配置了以下内容:

- [`cookies`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) 作为存储。
- [`store.$id`](https://pinia.vuejs.org/api/interfaces/pinia.StoreProperties.html) 作为 storage 的默认 key。
- [`JSON.stringify`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)/[`destr`](https://github.com/unjs/destr) 作为序列化器/反序列化器。
- 整个状态将持久化到存储中。

## 选择存储

您可以通过使用自动导入的 `piniaPluginPersistedstate` 变量下的可用存储来配置要使用的存储。

> [!WARNING] 警告
> 使用 `persistedState` 公开的存储之外的其他存储可能会出现意外行为。
### `cookies`

```ts{10}
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: 'hello pinia',
}
},
persist: {
storage: piniaPluginPersistedstate.cookies(),
},
})
```

> [!TIP] 提示
> `persistedState.Cookies` 方法接受一个对象参数来配置带有以下选项的cookie(从Nuxt的 `useCookie` 继承而来):
> - [`domain`](https://nuxt.com/docs/api/composables/use-cookie#domain)
> - [`expires`](https://nuxt.com/docs/api/composables/use-cookie#maxage-expires)
> - [`httpOnly`](https://nuxt.com/docs/api/composables/use-cookie#httponly)
> - [`maxAge`](https://nuxt.com/docs/api/composables/use-cookie#maxage-expires)
> - [`partitioned`](https://nuxt.com/docs/api/composables/use-cookie#partitioned)
> - [`path`](https://nuxt.com/docs/api/composables/use-cookie#path)
> - [`sameSite`](https://nuxt.com/docs/api/composables/use-cookie#samesite)
> - [`secure`](https://nuxt.com/docs/api/composables/use-cookie#secure)
### `localStorage`

```ts{10}
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: 'hello pinia',
}
},
persist: {
storage: piniaPluginPersistedstate.localStorage(),
},
})
```

> [!WARNING] 警告
> `localStorage` 仅限客户端。
### `sessionStorage`

```ts{10}
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: 'hello pinia',
}
},
persist: {
storage: piniaPluginPersistedstate.sessionStorage(),
},
})
```

> [!WARNING] 警告
> `sessionStorage` 仅限客户端。
## 全局选项

该模块接受在 `piniaPluginPersistedstate` key下的 `nuxt.config.ts` 中定义的一些选项:

- [`cookieOptions`](#cookies)
- `debug`
- [`key`](#global-key)
- `storage`

> [!NOTE]
> 全局存储选项仅接受预配置存储 (`'cookies'`, `'localStorage'`, `'sessionStorage'`)的字符串值。 这是由于 Nuxt 将 [模块选项传递给运行时](https://nuxt.com/docs/guide/going-further/modules#exposing-options-to-runtime)的方式。
```ts{6-12} [nuxt.config.ts]
export default defineNuxtConfig({
modules: [
'@pinia/nuxt',
'pinia-plugin-persistedstate/nuxt'
],
piniaPluginPersistedstate: {
storage: 'cookies',
cookieOptions: {
sameSite: 'lax',
},
debug: true,
},
})
```

## 全局密钥

您可以为全局使用的前缀/后缀键提供模板字符串。提供的密钥必须包含令牌 `%id` ,该令牌将被相应的存储id替换。

```ts{6} [nuxt.config.ts]
export default defineNuxtConfig({
modules: [
'@pinia/nuxt',
'pinia-plugin-persistedstate/nuxt'
],
piniaPluginPersistedstate: {
key: 'prefix_%id_postfix',
},
})
```

任何以 `my-store` 作为持久key(用户提供或从商店id推断)的商店都将在 `prefix_my-store_postfix` key下持久化。
6 changes: 6 additions & 0 deletions docs/zh/frameworks/others.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# 与其他 Vue 框架一起使用

没有计划在 Nuxt 之外为 Vue 框架提供官方支持。但是,该插件应该可以在大多数框架中使用,就像任何 Pinia 插件一样。请注意潜在的 SSR 警告。

> [!IMPORTANT] 重要
> 如果你想提供在Quasar、Ionic或Vike等框架中集成 `pinia-plugin-persistedstate` 的配置,非常欢迎你 [为文档做出贡献](https://github.com/prazdevs/pinia-plugin-persistedstate/blob/main/CONTRIBUTING.md)!
Loading

0 comments on commit 42ced53

Please sign in to comment.