为项目添加状态管理

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);
           // 暂时直接使用微信返回的用户信息
@@ -48,26 +59,27 @@ const handleLogin = () => {
             rankTotal: 0,
           };
           isLogin.value = true;
-          
+
           // 保存到本地存储
-          uni.setStorageSync('userInfo', JSON.stringify(userInfo.value));
+          uni.setStorageSync("userInfo", JSON.stringify(userInfo.value));
         },
         fail: (err) => {
           uni.showToast({
-            title: '登录失败',
-            icon: 'none'
+            title: "登录失败",
+            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()
-    console.log('全局配置：', config)
+    const config = await getAppConfig();
+    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"], // 只持久化用户信息
+      },
+    ],
+  },
+});