Merge pull request #99 from vintonHuang/docs

feat: 1.新增i18n的文档 2. 优化pinia状体管理的内容

docs/.vitepress/config.js

@@ -64,6 +64,7 @@ function sidebarGuide() {
         { text: "vite.config.ts 基础配置", link: "/guide/vue3/base" },
         { text: "alias", link: "/guide/vue3/base" },
         { text: "proxy 跨域", link: "/guide/vue3/base" },
+        { text: "多语言解决方案", link: "/guide/vue3/i18n" },
         {
           text: "Eslint+Pettier+stylelint 统一开发规范",
           link: "/guide/vue3/lint",

docs/guide/vue3/i18n.md

@@ -0,0 +1,89 @@
+<!--
+ * @Author: Vinton
+ * @Date: 2022-08-22 11:08:11
+ * @Description: file content
+-->
+# i18n 文本多语言解决方案
+
+```javascript
+import { createI18n } from 'vue-i18n'; // 引入第三方最新的i18n注意版本
+
+/**
+ * @description: 加载当前配置的语言配置目录，随意添加
+ */
+export function loadLang() {
+  const modules: Record<string, any> = import.meta.glob('./lang/*.ts', { eager: true });
+  const langs: Record<string, any> = {};
+
+  for (const path in modules) {
+    const name = path.replace(/(\.\/lang\/|\.ts)/g, '');
+    langs[name] = modules[path].lang;
+  }
+  return langs;
+}
+
+export const i18n = createI18n({
+  // globalInjection: true,
+  // legacy: false,
+  locale: 'zh-cn', // 默认语言，当前这里的数据要跟配置的lang目录下面的文件名字前缀一致
+  fallbackLocale: 'zh-cn',
+  messages: loadLang(), // 记载当前引入的语言目录的处理过后的数据
+});
+
+/**
+ * @description: 切换当前多语言
+ */
+export function setLang(locale?: string) {
+  if (locale) {
+    localStorage.setItem('lang', locale);
+  }
+  i18n.global.locale = locale || localStorage.getItem('lang') || '';
+}
+```
+
+# css图片解决方案
+
+目前在业务开发中,css的样式多语言也会经常用到，可能一些图片的字体比较复杂，代码很难实现。或者我们为了减少多语言的配置，加快开发效率也会使用多语言的配置,目前这里提供scss的图片多语言的方案
+
+```css
+@mixin main-lang-bg($width, $height, $preUrl, $posUrl) {
+  width: $width;
+  height: $height;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  @include loop-lang-bg($preUrl, $posUrl);
+}
+// 背景图多语言
+@mixin loop-lang-bg($preUrl, $posUrl) {
+  $list: zh-cn, en-us; // 配置需要的多语言，根据项目来
+  @each $i in $list {
+    &.#{$i} {
+      background-image: url('#{$preUrl}/#{$i}/#{$posUrl}');
+    }
+  }
+}
+```
+## 定义图片的目录格式
+```bash
+├── button
+│   ├── en-us
+│   │   └── confirm.png
+│   ├── zh-cn
+│   │   └── confirm.png
+```
+
+## HTML的使用方式
+
+```html
+<template>
+ <div :class="['btn-confirm', i18n.global.locale]"></div>
+</template>
+<script lang="ts" setup name="HomePage">
+    import { i18n } from '/@/i18n';
+</script>
+<style lang="scss" scoped>
+    .btn-confirm {
+        @include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png');
+    }
+</style>
+```

docs/guide/vue3/pinia.md

@@ -1,3 +1,8 @@
+<!--
+ * @Author: Vinton
+ * @Date: 2022-08-22 10:39:13
+ * @Description: file content
+-->
 # Pinia 状态管理
 
 下一代 vuex，使用极其方便，ts 兼容好
@@ -10,6 +15,75 @@
 │   │   └── user.js
 │   ├── index.js
 ```
+目前pinia分为两种编程模式,options API和 Composition API，我们这边都会列举出来实现的业务逻辑效果是一样的，提供大家思路
+
+### options API: 
+
+```javascript
+interface StoreUser {
+  token: string;
+  info: Record<any, any>;
+}
+
+export const useUserStore = defineStore({
+  id: 'app-user',
+  state: (): StoreUser => ({
+    token: token,
+    info: {},
+  }),
+  getters: {
+    getUserInfo(): any {
+      return this.info || {};
+    },
+  },
+  actions: {
+    setInfo(info: any) {
+      this.info = info ? info : '';
+    },
+    login() {
+      return new Promise((resolve) => {
+        const { data } = loginPassword();
+        watch(data, () => {
+          this.setInfo(data.value);
+          // useCookies().set(VITE_TOKEN_KEY as string, data.value.token);
+          resolve(data.value);
+        });
+      });
+    },
+  },
+});
+```
+
+### Composition API:
+```javascript
+export const useUserStore = defineStore('app-user', () => {
+  const Token = ref(token);
+  const info = ref<Record<any, any>>({});
+  const setInfo = (info: any) => {
+    info.value = info ? info : '';
+  };
+  const getUserInfo = () => {
+    return info || {};
+  };
+  const login = () => {
+    return new Promise((resolve) => {
+      const { data } = loginPassword();
+      watch(data, () => {
+        setInfo(data.value);
+        // useCookies().set(VITE_TOKEN_KEY as string, data.value.token);
+        resolve(data.value);
+      });
+    });
+  };
+  return {
+    Token,
+    info,
+    setInfo,
+    login,
+    getUserInfo,
+  };
+})
+```
 
 使用