-
-
Notifications
You must be signed in to change notification settings - Fork 129
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add Chinese translation (#338)
Co-authored-by: lichong <1546214265@qq.com> Co-authored-by: PraZ <hi@praz.dev>
- Loading branch information
1 parent
b269d4b
commit 42ced53
Showing
10 changed files
with
905 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
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,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 及贡献者', | ||
}, | ||
|
||
}, | ||
} |
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,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下持久化。 |
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,6 @@ | ||
# 与其他 Vue 框架一起使用 | ||
|
||
没有计划在 Nuxt 之外为 Vue 框架提供官方支持。但是,该插件应该可以在大多数框架中使用,就像任何 Pinia 插件一样。请注意潜在的 SSR 警告。 | ||
|
||
> [!IMPORTANT] 重要 | ||
> 如果你想提供在Quasar、Ionic或Vike等框架中集成 `pinia-plugin-persistedstate` 的配置,非常欢迎你 [为文档做出贡献](https://github.com/prazdevs/pinia-plugin-persistedstate/blob/main/CONTRIBUTING.md)! |
Oops, something went wrong.