实现步骤
使用 Vue3 提供的 Provide/Inject 组合，通过 provide 在App.vue中提供当前语言环境localeLanguage，代码片段如下所示：
// App.vue
<script setup lang="ts">
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import en from 'element-plus/lib/locale/lang/en'
import { ref, provide } from 'vue' // 显示引入 provide
const locale = ref(zhCn)
const localeLanguage = ref('')
function changeLang(language: any) {
locale.value = language
localeLanguage.value = language.name
}
// 提供当前语言环境 localeLanguage
provide('localeLanguage', localeLanguage)
</script>
然后再通过 inject 将其注入到 home 页面，将获取到的 localeLanguage 传入自定义的 t 函数中，代码片段如下所示：
// home/index.vue
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { inject } from 'vue' // 显示引入 inject
import { t } from '../../utils/internationalization'
// 通过inject将localeLanguage注入，作为t函数的参数
const localeLanguage: string = inject('localeLanguage') || ''
const route = useRoute()
console.log(route.params)
const value1 = ''
</script>
<template>
<div>{{ t(localeLanguage).home }}---{{ t(localeLanguage).mine }}</div>
<el-date-picker v-model="value1" type="date" placeholder="Pick a day"></el-date-picker>
</template>
封装一个openStore()，使用indexedDB.open()方法返回一个 IDBRequest对象，接着将这个对象上的三个事件分别放置进入：onsuccess、onerror、onupgradeneeded。
onsuccess表示打开数据库成功的事件。
onerror表示打开数据库失败的事件。
onupgradeneeded是数据库升级事件，如果版本号更新，并且大于之前的版本号则进行数据库升级，该事件回调里面，会创建我们所需要的对象仓库，类似于关系型数据库中的表的概念。
export default class DB {
private dbName: string // 数据库名称
constructor(dbName: string) {
this.dbName = dbName
}
// 打开数据库
public openStore(storeName: string, keyPath: string, indexs?: Array<string>) {
const request = window.indexedDB.open(this.dbName, 2)
request.onsuccess = (event) => {
console.log('数据库打开成功')
console.log(event)
}
request.onerror = (event) => {
console.log('数据库打开失败')
console.log(event)
}
request.onupgradeneeded = (event) => {
console.log('数据库升级成功')
const { result }: any = event.target
const store = result.createObjectStore(storeName, { autoIncrement: true, keyPath })
if (indexs && indexs.length > 0) {
indexs.map((v: string) => {
store.createIndex(v, v, { unique: true })
})
}
store.transaction.oncomplete = (event: any) => {
console.log('创建对象仓库成功')
}
console.log(event)
}
}
}
Promise包装异步事务
为了更好的获取indexedD事务中的返回结果，我们使用promise来包装一下上一小节indexedDB.ts中定义的几个方法：openStore、updateItem、deleteItem、getList、getItem。下面代码片段为getList()
// 查询所有数据
getList(storeName: string) {
const store = this.db.transaction(storeName).objectStore(storeName)
const request = store.getAll()
return new Promise((resolve, reject) => {
request.onsuccess = (event: any) => {
console.log('查询所有数据成功')
console.log(event.target.result)
resolve(event.target.result)
}
request.onerror = (event: any) => {
console.log('查询所有数据失败')
console.log(event)
reject(event)
}
})
}
使用@include 指令来引入定义好的样式函数，该函数的三个参数可以根据传入的值来对 flex布局进行自定义，默认值为：column、center、right，在 footerCommon.scss中我们重新自定义了该样式函数，分别传入 row、space-between、flex-start，代码片段如下：
// footerCommon.scss
.common-footer{
border-top: 1px solid rgb(235, 235, 235);
.footer{
@include main-wrapper;
@include layout(row,space-between,flex-start);
padding: 20px 0;
li{
@include layout;
h4{
font-weight: bold;
}
a{
margin-bottom: 10px;
color: rgb(72, 72, 72);
text-decoration: none;
&:hover{
text-decoration:underline;
}
}
}
}
}
getter 类似与 Vue 中的 computed 计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
getters 里可以处理一些 array、object 的查询、过滤、遍历、重构或者做一些字符拼接的操作，方便直接生成一些可以直接使用的数据。如下代码片段展示了如何在getter中进行过滤查询：
export const store = createStore({
state:{
todos:[ // 定义一个对象数组
{
id: 1,
done: true
},
{
id: 2,
done: false
}
]
}
getters: {
doneTodosCount () { // 查询已完成的个数
return store.state.todos.filter(todo => todo.done).length // 返回值：1
}
}
})
通过环境变量区分 server.js中的一些代码片段，因为有些代码需要运行在开发环境，而有些代码需要运行在生产环境。本小节在 server.js中一共对3个地方进行了环境区分，代码片段如下
// server.js
if (!isProd) {
// 1. 读取 index.html
template = fs.readFileSync(
path.resolve(__dirname, 'index.html'),
'utf-8'
)
// 2. 应用 Vite HTML 转换。这将会注入 Vite HMR 客户端，
// 同时也会从 Vite 插件应用 HTML 转换。
// 例如：@vitejs/plugin-react-refresh 中的 global preambles
template = await vite.transformIndexHtml(url, template)
// 3. 加载服务器入口。vite.ssrLoadModule 将自动转换
// 你的 ESM 源码使之可以在 Node.js 中运行！无需打包
// 并提供类似 HMR 的根据情况随时失效。
render = (await vite.ssrLoadModule('/src/entry-server.ts')).render
} else {
// 1. 读取 index.html
template = fs.readFileSync(
path.resolve(__dirname, 'dist/client/index.html'),
'utf-8'
)
// 3. 加载服务器入口
render = require('./dist/server/entry-server.ts').render
}
