添加全局状态管理器pinia

.gitignore

@@ -1,3 +1,5 @@
 .idea
 .hbuilderx
 .DS_Store
+unpackage
+node_modules

main.js

@@ -1,22 +1,18 @@
 import App from './App'
-
+import * as Pinia from 'pinia'
-// #ifndef VUE3
-import Vue from 'vue'
-import './uni.promisify.adaptor'
-Vue.config.productionTip = false
-App.mpType = 'app'
-const app = new Vue({
-  ...App
-})
-app.$mount()
-// #endif
-
-// #ifdef VUE3
 import { createSSRApp } from 'vue'
+import { createUnistorage } from 'pinia-plugin-unistorage'
+
 export function createApp() {
   const app = createSSRApp(App)
+
+  // pinia数据持久化
+  const store = Pinia.createPinia()
+  store.use(createUnistorage())
+  app.use(store)
+
   return {
-    app
+    app,
+    Pinia
   }
 }
-// #endif

package-lock.json

@@ -0,0 +1,81 @@
+{
+  "name": "wx-starlock",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "pinia": "^2.2.0",
+        "pinia-plugin-unistorage": "^0.1.2"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.3",
+      "license": "MIT"
+    },
+    "node_modules/pinia": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.0.tgz",
+      "integrity": "sha512-iPrIh26GMqfpUlMOGyxuDowGmYousTecbTHFwT0xZ1zJvh23oQ+Cj99ZoPQA1TnUPhU6AuRPv6/drkTCJ0VHQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia-plugin-unistorage": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-unistorage/-/pinia-plugin-unistorage-0.1.2.tgz",
+      "integrity": "sha512-WXit2cGnm5rG6CDTcLSLehNWhyJS/Yq7WEeeXAapZbCnqoPJxlszqg7rT8S+OP47az0h5nlajGo+LuyMxUQ2uw==",
+      "license": "MIT"
+    },
+    "node_modules/vue": {
+      "version": "2.6.14",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
+      "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
+      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "pinia": "^2.2.0",
+    "pinia-plugin-unistorage": "^0.1.2"
+  }
+}

pages/index/index.vue

@@ -2,23 +2,35 @@
 	<view class="content">
 		<image class="logo" src="/static/logo.png"></image>
 		<view class="text-area">
-			<text class="title">{{title}}</text>
+			<text class="title">{{title}}{{userInfo.name}}</text>
 		</view>
 	</view>
 </template>
 
 <script>
+  import { useUserStore } from '../../stores/user.js'
+  import { mapState, mapActions } from 'pinia'
+
 	export default {
 		data() {
 			return {
 				title: 'Hello'
 			}
 		},
+    computed: {
+      // 允许读取this.userInfo
+      ...mapState(useUserStore, ['userInfo'])
+    },
 		onLoad() {
-
+      this.update()
 		},
 		methods: {
-
+      // 允许调用this.updateUserInfo()
+      ...mapActions(useUserStore, ['updateUserInfo']),
+      update() {
+        this.updateUserInfo({ name: '123' })
+        console.log(111, this.userInfo)
+      }
 		}
 	}
 </script>
@@ -34,11 +46,8 @@
 	.logo {
 		height: 200rpx;
 		width: 200rpx;
-		margin-top: 200rpx;
+    margin: 200rpx auto 50rpx;
-		margin-left: auto;
+  }
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
 
 	.text-area {
 		display: flex;
@@ -49,4 +58,4 @@
 		font-size: 36rpx;
 		color: #8f8f94;
 	}
-</style>
+</style>

stores/user.js

@@ -0,0 +1,17 @@
+/**
+ * @description 用户信息数据持久化
+ */
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', {
+  state() {
+    return {
+      userInfo: {}
+    }
+  },
+  actions: {
+    updateUserInfo(data) {
+      this.userInfo = data
+    }
+  }
+})