vue3+ts 封装storage+图片懒加载

const STORAGE_KEY = 'aqd'

export default {
    getStorage() {
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '{}')
    },
    clearModuleKye(key:string,module_name:string) {
        const val = this.getStorage()
        if (!val[module_name]) return
        delete val[module_name][key]
        return window.localStorage.setItem(STORAGE_KEY,JSON.stringify(val))
    },
    clearKey(key:string) {
        const val = this.getStorage()
        delete val[key]
        return window.localStorage.setItem(STORAGE_KEY,JSON.stringify(val))
    },
    getItemModule(key:string,module_name:string) {
        const val = this.getItemKey(module_name)
        if (val) return val[key]
        return this.getStorage()[key]
    },
    getItemKey(key:string) {
        return this.getStorage()[key]
    },
    setItemMOduleKey(key:string,value:any,module_name:string) {
            const val = this.getStorage()
            val[key] = value
            this.setItemKey(module_name,val)
    },
    setItemKey(key:string,value:any) {
        const val = this.getStorage()
        val[key] = value
        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(val))
    }
}

测试没有问题放心使用


npm i vue3-lazyload

import VueLazyLoad from 'vue3-lazyload'

app.use(VueLazyLoad,{
    loading: require('@/assets/images/loading.gif')
})

调用

 <img v-lazy="item.imgsmall" alt="">

这个是支持ts的,要加require

UniApp结合TypeScript(简称TS封装网络请求,并利用Vue.js的状态管理库Pinia进行数据管理和持久化,可以提高代码组织和维护效率。以下是基本步骤: 1. 安装依赖: - 首先确保已经安装了`uni-app`, `vue3-persist-storage` 和 `@pinia/store` 等依赖。 ```bash npm install uni-app ts axios vue3-persist-storage @pinia/store ``` 2. 创建Pinia store: - 在`src/stores`目录下创建一个新的文件,如`requestStore.ts`,并引入`createStore`和`usePersistedState`。 ```typescript import { createStore } from &#39;@pinia/store&#39;; import { usePersistedState } from &#39;vue3-persist-storage&#39;; export const requestStore = createStore({ id: &#39;requestStore&#39;, state: () => ({ loading: false, data: null, error: null, }), getters: { // ...getters for your state }, actions: { fetchData({ commit }, payload) { commit(&#39;SET_LOADING&#39;, true); this.$axios.get(payload.url).then(response => { commit(&#39;SET_DATA&#39;, response.data); commit(&#39;SET_LOADING&#39;, false); }).catch(error => { commit(&#39;SET_ERROR&#39;, error.message); commit(&#39;SET_LOADING&#39;, false); }); }, }, mutations: { SET_LOADING(state, loading) { state.loading = loading; }, SET_DATA(state, data) { state.data = data; }, SET_ERROR(state, error) { state.error = error; }, }, }); // 使用usePersistedState在store初始化时恢复数据 const persistedData = usePersistedState(requestStore.state, { key: &#39;requestStore&#39; }); requestStore.state = persistedData; ``` 3. 在组件中使用: - 导入store并注入到组件的setup函数中,然后通过store的actions发起请求。 ```typescript import { onMounted, ref } from &#39;vue&#39;; import { useRequestStore } from &#39;./requestStore&#39;; export default { setup() { const loading = ref(false); const requestAction = useRequestStore(); onMounted(() => { requestAction.fetchData({ url: &#39;your-api-url&#39; }); }); // 当需要更新状态时,直接操作store,例如: onUnmounted(() => { requestAction.setData(null); // 清理缓存数据 }); return { loading, // ...其他组件内的暴露属性和方法 }; } }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaodunmeng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值