chore: 使用 pinia 替代 context 模式

由于 ui-app 架构问题，pinia 版本不得高于 2.0.36
dcloudio/uni-app#4350

package.json

@@ -58,6 +58,7 @@
     "marked-highlight": "^2.1.1",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-to-markdown": "^2.1.0",
+    "pinia": "2.0.36",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
     "unified": "^11.0.4",

src/App.vue

@@ -1,22 +1,11 @@
 <script setup lang="ts">
-import { reactive } from "vue";
 import { onLaunch, onShow, onHide, onPageNotFound, onError } from "@dcloudio/uni-app";
 
-import { type APPContext, provideAPPContext } from './components/app-context'
-
-const systemInfo = uni.getSystemInfoSync();
-
-const appContextData = reactive<APPContext>({
-  systemInfo,
-});
-
 const pages = getCurrentPages();
 if (pages.length > 0) {
   console.log(pages);
 }
 
-provideAPPContext(appContextData);
-
 onLaunch(() => {
   console.log("App Launch");
 });

src/components/lang-picker/lang-picker.vue

@@ -0,0 +1,11 @@
+<template>
+    <up-picker :columns="columns" :closeOnClickOverlay="true" />
+</template>
+
+<script setup lang="ts">
+const columns = [
+    ['en', 'zh-cn'],
+]
+</script>
+
+<style lang="scss" scoped></style>

src/components/markdown-t/markdown-t.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h } from "vue";
 import UText from "uview-plus/components/u--text/u--text.vue";
 import { safeExecuteDecorator } from "../../utils/safeExecute";
-import { injectAPPContext } from "../app-context";
+import useAPPStore from "../../stores/app-stores";
 import mdTextToVNode from "./mdTextToVNode";
 
 const safeMdTextToVNode = safeExecuteDecorator(
@@ -13,7 +13,7 @@ export default defineComponent({
   __name: "markdown-t",
   props: ["content"],
   setup(props) {
-    const appCtx = injectAPPContext();
+    const appCtx = useAPPStore();
     const uniPlatform = appCtx.systemInfo.uniPlatform;
     return () => safeMdTextToVNode(props.content, uniPlatform);
   },

src/components/theme-picker/theme-picker.vue

@@ -0,0 +1,11 @@
+<template>
+    <up-picker :columns="columns" :closeOnClickOverlay="true" />
+</template>
+
+<script setup lang="ts">
+const columns = [
+    ['light', 'dark'],
+]
+</script>
+
+<style lang="scss" scoped></style>

src/main.ts

@@ -1,10 +1,14 @@
 import { createSSRApp } from "vue";
 import uviewPlus from "uview-plus";
+import { createPinia } from 'pinia'
 import App from "./App.vue";
 
 export function createApp() {
+  const pinia = createPinia()
   const app = createSSRApp(App);
-  app.use(uviewPlus);
+  app
+  .use(pinia)
+  .use(uviewPlus);
   return {
     app,
   };

src/pages/download-progress/index.vue

@@ -11,13 +11,13 @@
     <up-button type="primary" @click="showPicker = true">切换资源</up-button>
   </view>
   <up-picker :show="showPicker" :columns="resourcePickerCols" @confirm="handleResourceChange"
-    @cancel="showPicker = false" closeOnClickOverlay="true" @close="showPicker = false" />
+    @cancel="showPicker = false" :closeOnClickOverlay="true" @close="showPicker = false" />
   <u-toast ref="uToastRef"></u-toast>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
-import { injectAPPContext } from '../../components/app-context'
+import useAPPStore from "../../stores/app-stores";
 import sleep from '../../utils/sleep'
 
 const resourceList = [
@@ -90,8 +90,8 @@ requestAndUpdateProgressRepo.set('web', async (reqURL: string) => {
   await updateProgress();
 })
 
-const appContext = injectAPPContext();
-const uniPlatform = appContext.systemInfo.uniPlatform
+const appStore = useAPPStore();
+const uniPlatform = appStore.systemInfo.uniPlatform
 
 let requestAndUpdateProgress: RequestAndUpdateProgress;
 if (requestAndUpdateProgressRepo.has(uniPlatform)) {

src/pages/index/index.vue

@@ -7,6 +7,10 @@
     <view class="text-area">
       <up-text type="info" :text="subTitle" class="title" />
     </view>
+    <view style="display: flex; gap: 8px;">
+      <up-button type="info" text="切换主题" @click="showThemePicker = true"></up-button>
+      <up-button type="info" text="切换语言" @click="showLangPicker = true"></up-button>
+    </view>
     <u-list>
       <u-list-item v-for="item in pageConfList" :key="item.path">
         <navigator :url="item.path">
@@ -16,25 +20,47 @@
       </u-list-item>
     </u-list>
   </view>
+  <theme-picker :show="showThemePicker" @confirm="onThemePickerConfirm" @cancel="showThemePicker = false"
+    @close="showThemePicker = false" />
+  <lang-picker :show="showLangPicker" @confirm="onLangPickerConfirm" @cancel="showLangPicker = false"
+    @close="showLangPicker = false" />
 </template>
 
 <script setup lang="ts">
-import { injectAPPContext } from '../../components/app-context'
+import { ref, computed } from 'vue'
+import ThemePicker from "../../components/theme-picker/theme-picker.vue";
+import LangPicker from "../../components/lang-picker/lang-picker.vue";
+import useAPPStore from "../../stores/app-stores";
 import pagesConf from '../../pages.json'
 
-const appContext = injectAPPContext();
+const appStore = useAPPStore();
 
 const title = '基于 uni-app 的 demo';
-const subTitle = `当前平台：${appContext.systemInfo.uniPlatform}`
+const subTitle = computed(() =>
+  `当前平台：${appStore.systemInfo.uniPlatform}
+当前主题：${appStore.theme}
+当前语言：${appStore.lang}
+`)
 
-// console.log(import.meta.url)
 const pageConfList = pagesConf
   .pages
   .slice(1)
   .map((conf) => ({
     path: '/' + conf?.path,
     label: conf?.style?.navigationBarTitleText || ''
   }))
+
+
+const showThemePicker = ref(false);
+const onThemePickerConfirm = (selected: any) => {
+  appStore.changeTheme(selected.value[0])
+  showThemePicker.value = false;
+}
+const showLangPicker = ref(false);
+const onLangPickerConfirm = (selected: any) => {
+  appStore.changeLanguage(selected.value[0])
+  showLangPicker.value = false;
+}
 </script>
 
 <style lang="scss" scoped>

src/stores/app-stores.ts

@@ -0,0 +1,36 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export type APPTheme = 'light' | 'dark';
+
+export type APPLang = 'zh-cn' | 'en';
+
+export type APPStore = {
+  systemInfo: UniApp.GetSystemInfoResult;
+  theme: APPTheme;
+  lang: APPLang;
+  changeTheme: (newTheme: APPTheme) => void;
+};
+
+export default defineStore('app', () => {
+  const systemInfo = uni.getSystemInfoSync();
+  const theme = ref<APPTheme>('light');
+  const lang = ref<APPLang>('zh-cn');
+
+  const changeTheme = (newTheme: APPTheme) => {
+    theme.value = newTheme;
+  };
+
+  const changeLanguage =(newLang: APPLang) => {
+    lang.value = newLang;
+  }
+
+  return {
+    systemInfo,
+    theme,
+    lang,
+    // actions
+    changeTheme,
+    changeLanguage,
+  };
+});