是否有一种简单的方法可以在Base64中对Nuxt.js中的字符串进行编码/解码,同时支持服务器端呈现,最好是TypeScript?
发布于 2021-06-30 10:23:26
没有内置的方法,我也没有找到任何插件,所以我自己创建了一个很小的插件,可以简单地放到/plugins
目录中。
import { Plugin } from '@nuxt/types'
function encodeBase64 (value: string): string {
if (process.client) {
return window.btoa(unescape(encodeURIComponent(value)))
} else {
return Buffer.from(value, 'ascii').toString('base64')
}
}
function decodeBase64 (value: string): string {
if (process.client) {
return decodeURIComponent(escape(window.atob(value)))
} else {
return Buffer.from(value, 'base64').toString('ascii')
}
}
declare module 'vue/types/vue' {
interface Vue {
$encodeBase64: (value: string) => string,
$decodeBase64: (value: string) => string
}
}
declare module '@nuxt/types' {
// nuxtContext.app.$lines inside asyncData, fetch, plugins, middleware, nuxtServerInit
interface NuxtAppOptions {
$encodeBase64: (value: string) => string,
$decodeBase64: (value: string) => string
}
// nuxtContext.$lines
interface Context {
$encodeBase64: (value: string) => string,
$decodeBase64: (value: string) => string
}
}
declare module 'vuex/types/index' {
// this.$lines inside Vuex stores
// eslint-disable-next-line
interface Store<S> {
$encodeBase64: (value: string) => string,
$decodeBase64: (value: string) => string
}
}
const base64Plugin: Plugin = (_context, inject) => {
inject('encodeBase64', encodeBase64)
inject('decodeBase64', decodeBase64)
}
export default base64Plugin
不要忘记将它加载到您的nuxt.config.ts
中
plugins: [
{ src: '~/plugins/base64.ts' },
],
现在,在客户端和服务器端的$encodeBase64()
组件中使用$decodeBase64()
和$decodeBase64()
。
https://stackoverflow.com/questions/68192978
复制相似问题