为项目添加状态管理

package.json

@@ -10,6 +10,7 @@
     "@dcloudio/uni-app": "3.0.0-4050620250312001",
     "@dcloudio/uni-components": "3.0.0-4050620250312001",
     "@dcloudio/uni-mp-weixin": "3.0.0-4050620250312001",
+    "pinia": "2.0.36",
     "vue": "3.4.21"
   },
   "devDependencies": {

src/main.js

@@ -1,9 +1,12 @@
 import { createSSRApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
 
 export function createApp() {
   const app = createSSRApp(App)
+  const pinia = createPinia()
+  app.use(pinia)
   return {
-    app,
+    app
   }
 }

src/pages/index.vue

@@ -3,7 +3,16 @@ import { ref, onMounted } from "vue";
 import AppFooter from "@/components/AppFooter.vue";
 import AppBackground from "@/components/AppBackground.vue";
 import UserHeader from "@/components/UserHeader.vue";
-import { getAppConfig } from '@/apis'
+import { getAppConfig } from "@/apis";
+
+// import useStore from "@/store";
+
+import { storeToRefs } from "pinia";
+// const store = useStore();
+// 使用actions方法
+// const { updateUsername } = store;
+// 使用storeToRefs，用于UI里显示，保持响应性
+// const { user } = storeToRefs(store);
 
 // 添加登录状态和用户信息
 const isLogin = ref(true);
@@ -17,7 +26,7 @@ const userInfo = ref({
 
 // 检查登录状态
 const checkLogin = () => {
-  const storedUserInfo = uni.getStorageSync('userInfo');
+  const storedUserInfo = uni.getStorageSync("userInfo");
   if (storedUserInfo) {
     userInfo.value = JSON.parse(storedUserInfo);
     isLogin.value = true;
@@ -26,17 +35,19 @@ const checkLogin = () => {
 
 // 处理微信登录
 const handleLogin = () => {
+  // console.log("getUsername", store.getUsername);
+  // updateUsername("we0f9we9f08");
   uni.getUserProfile({
-    desc: '用于完善用户资料',
+    desc: "用于完善用户资料",
     success: (res) => {
       const { userInfo: wxUserInfo } = res;
-      console.log('wxUserInfo', wxUserInfo);
+      console.log("wxUserInfo", wxUserInfo);
       // 获取登录凭证
       uni.login({
-        provider: 'weixin',
+        provider: "weixin",
         success: async (loginRes) => {
           const { code } = loginRes;
-          console.log('loginRes', loginRes);
+          console.log("loginRes", loginRes);
           // 这里可以把 code 和用户信息发送到后端
           // const result = await loginAPI(code, wxUserInfo);
           // 暂时直接使用微信返回的用户信息
@@ -50,24 +61,25 @@ const handleLogin = () => {
           isLogin.value = true;
 
           // 保存到本地存储
-          uni.setStorageSync('userInfo', JSON.stringify(userInfo.value));
+          uni.setStorageSync("userInfo", JSON.stringify(userInfo.value));
         },
         fail: (err) => {
           uni.showToast({
-            title: '登录失败',
+            title: "登录失败",
-            icon: 'none'
+            icon: "none",
           });
-          console.error('登录失败：', err);
+          console.error("登录失败：", err);
-        }
+        },
       });
     },
     fail: (err) => {
-      console.log('获取用户信息失败：', err);
+      console.log("获取用户信息失败：", err);
-    }
+    },
   });
 };
 
 const toFristTryPage = () => {
+  console.log("username", username);
   uni.navigateTo({
     url: "/pages/first-try",
   });
@@ -98,13 +110,13 @@ const toQquipmentPage = () => {
 // 获取全局配置
 const getConfig = async () => {
   try {
-    const config = await getAppConfig()
+    const config = await getAppConfig();
-    console.log('全局配置：', config)
+    console.log("全局配置：", config);
     // 这里可以处理配置数据
   } catch (error) {
-    console.error('获取配置失败：', error)
+    console.error("获取配置失败：", error);
-  }
   }
+};
 
 // 页面加载完成后检查本地存储的用户信息并获取配置
 onMounted(() => {
@@ -128,7 +140,11 @@ onMounted(() => {
     <view class="container">
       <view class="feature-grid">
         <view class="bow-card">
-          <image src="../static/bow-bg.png" mode="widthFix" @click="toQquipmentPage" />
+          <image
+            src="../static/bow-bg.png"
+            mode="widthFix"
+            @click="toQquipmentPage"
+          />
           <text>我的弓箭</text>
           <image
             src="../static/a2@2x.png"

src/store.js

@@ -0,0 +1,36 @@
+import { defineStore } from "pinia";
+
+// 定义游戏相关的 store
+export default defineStore("store", {
+  // 状态
+  state: () => ({
+    user: {
+      username: "游客",
+    },
+  }),
+
+  // 计算属性
+  getters: {
+    getUsername: (state) => {
+      return state.user.username;
+    },
+  },
+
+  // 方法
+  actions: {
+    updateUsername(newUsername) {
+      this.user.username = newUsername;
+    },
+  },
+
+  // 开启数据持久化
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        storage: uni.getStorageSync,
+        paths: ["user"], // 只持久化用户信息
+      },
+    ],
+  },
+});

yarn.lock

@@ -1908,7 +1908,7 @@
     "@vue/compiler-dom" "3.5.13"
     "@vue/shared" "3.5.13"
 
-"@vue/devtools-api@^6.6.4":
+"@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.6.4":
   version "6.6.4"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
   integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
@@ -3183,6 +3183,14 @@ pify@^2.3.0:
   resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
+pinia@2.0.36:
+  version "2.0.36"
+  resolved "https://registry.npmjs.org/pinia/-/pinia-2.0.36.tgz#65130f3b94cc7fe25156308634010fab893dff24"
+  integrity sha512-4UKApwjlmJH+VuHKgA+zQMddcCb3ezYnyewQ9NVrsDqZ/j9dMv5+rh+1r48whKNdpFkZAWVxhBp5ewYaYX9JcQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi "*"
+
 pixelmatch@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz#8f47dcec5011b477b67db03c243bc1f3085e8854"
@@ -3820,6 +3828,11 @@ vite@5.2.8:
   optionalDependencies:
     fsevents "~2.3.3"
 
+vue-demi@*:
+  version "0.14.10"
+  resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
+  integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
+
 vue-router@^4.3.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz#58fc5fe374e10b6018f910328f756c3dae081f14"