为项目添加状态管理

2025-05-25 23:51:10 +08:00
parent 222a1fd7aa
commit 6931646737
5 changed files with 90 additions and 21 deletions
--- a/package.json
+++ b/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": {
--- a/src/main.js
+++ b/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
  }
 }
--- a/src/pages/index.vue
+++ b/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"
--- a/src/store.js
+++ b/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"], // 只持久化用户信息
+      },
+    ],
+  },
+});
--- a/yarn.lock
+++ b/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"