整合 pinia + 本地存储

package.json

@@ -58,7 +58,10 @@
     "@dcloudio/uni-mp-xhs": "3.0.0-4020920240930001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-4020920240930001",
     "@dcloudio/uni-ui": "^1.5.6",
+    "destr": "^2.0.3",
     "moment": "^2.30.1",
+    "pinia": "^2.2.4",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "vue": "^3.4.21",
     "vue-i18n": "^9.1.9"
   },

src/main.js

@@ -1,5 +1,7 @@
 import App from './App'
 
+import pinia from './stores'
+
 // #ifndef VUE3
 import Vue from 'vue'
 import './uni.promisify.adaptor'
@@ -15,8 +17,9 @@ app.$mount()
 import { createSSRApp } from 'vue'
 export function createApp() {
   const app = createSSRApp(App)
+  app.use(pinia)
   return {
     app
   }
 }
-// #endif
+// #endif

src/pages/index/components/category-item/index.vue

@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({
+  src: {
+    required: true,
+  },
+  title: {
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <view style="text-align:center;padding:5px">
+    <image :src="props.src" mode="widthFix" style="width: 100%; height: 100%"/>
+    <text>
+      {{ props.title }}
+    </text>
+  </view>
+</template>
+
+<style scoped>
+
+</style>

src/pages/index/index.vue

@@ -7,12 +7,27 @@
       paddingTop: statusBarHeight + 'px',
       paddingRight: capsuleWidth + 'px',
     }">
-
       <uni-search-bar v-model="search.keyword" bgColor="#EEEEEE" placeholder="请输入搜索内容" @confirm="searchKeyword" cancelButton="none"></uni-search-bar>
     </view>
   </view>
 
   <swiper indicator-dots circular :autoplay="false" class="banner">
+    <swiper-item>
+      <view style="display: grid;grid-template-columns: repeat(5, 1fr);">
+        <category-item src="https://www.httpbin.org/image/png" title="美食"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
+
+        <category-item src="https://www.httpbin.org/image/png" title="美食"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
+        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
+      </view>
+    </swiper-item>
+
     <swiper-item v-for="item in pic.list" :key="item.id">
       <image @tap="previewImage(item)" :src="item.url"></image>
     </swiper-item>
@@ -31,8 +46,13 @@
 
 <script>
 import moment from 'moment'
+import {useUserStore} from "../../stores/modules/user";
+import CategoryItem from "./components/category-item/index.vue";
 let timer = null
 export default {
+  components: {
+    CategoryItem
+  },
   data() {
     return {
       navHeight: 0,
@@ -71,6 +91,8 @@ export default {
     timer = setInterval(() => {
       this.now = new moment().format('YYYY-MM-DD HH:mm:ss')
     }, 1000)
+
+    useUserStore().userInfo.name = "法外狂徒"
   },
   methods: {
     previewImage(item) {

src/pages/test-page/test-page.vue

@@ -30,14 +30,22 @@
   </uni-card>
 
   <button @tap="back">返回上一页</button>
+  <button type="warn" @tap="cleanStorage">清空本地存储</button>
 </template>
 
 <script setup>
+import {useUserStore} from "../../stores/modules/user";
+
 function back() {
   uni.navigateBack({
     animationDuration: 100
   })
 }
+
+function cleanStorage(){
+  useUserStore().clearUserInfo()
+  uni.clearStorage()
+}
 </script>
 
 

src/stores/index.js

@@ -0,0 +1,6 @@
+import {createPinia} from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+
+export default pinia

src/stores/modules/user.js

@@ -0,0 +1,30 @@
+import {defineStore} from 'pinia'
+import {reactive} from 'vue'
+
+export const useUserStore = defineStore('user', () =>{
+    const userInfo = reactive({
+        id: "",
+        name: "",
+    })
+
+    function clearUserInfo() {
+        userInfo.id = ""
+        userInfo.name = ""
+    }
+
+    return {
+        userInfo,
+        clearUserInfo
+    }
+}, {
+    persist: {
+        storage: {
+            getItem(key){
+                return uni.getStorageSync(key)
+            },
+            setItem(key, value){
+                uni.setStorageSync(key, value)
+            },
+        }
+    }
+})