pinia使用 piniaPluginPersist 持久化使用时候,添加persist属性时报错

图片这种报错:添加persist,显示没有与此调用匹配的重载

原因:在tsconfig.json中配置了 "target": "ES2020" (如下),然后就导致引入piniaPluginPersist的时候被当成组件使用就没有效果。

{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "module": "ESNext",
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "skipLibCheck": true,
        "allowJs": true,
        "typeRoots": ["./node_modules/@types", "./types"],
        "types": ["pinia-plugin-persist"],
        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "preserve",
 
        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
    "references": [{ "path": "./tsconfig.node.json" }],
    "paths": {
        "@/*": ["src/*"],
        "views/*": ["src/views/*"]
    }
}

 解决:后面tsconfig.json改成如下就可以正常写入

{
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "types": ["pinia-plugin-persistedstate"],
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
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 '@pinia/store'; import { usePersistedState } from 'vue3-persist-storage'; export const requestStore = createStore({ id: 'requestStore', state: () => ({ loading: false, data: null, error: null, }), getters: { // ...getters for your state }, actions: { fetchData({ commit }, payload) { commit('SET_LOADING', true); this.$axios.get(payload.url).then(response => { commit('SET_DATA', response.data); commit('SET_LOADING', false); }).catch(error => { commit('SET_ERROR', error.message); commit('SET_LOADING', 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: 'requestStore' }); requestStore.state = persistedData; ``` 3. 在组件中使用: - 导入store并注入到组件的setup函数中,然后通过store的actions发起请求。 ```typescript import { onMounted, ref } from 'vue'; import { useRequestStore } from './requestStore'; export default { setup() { const loading = ref(false); const requestAction = useRequestStore(); onMounted(() => { requestAction.fetchData({ url: 'your-api-url' }); }); // 当需要更新状态,直接操作store,例如: onUnmounted(() => { requestAction.setData(null); // 清理缓存数据 }); return { loading, // ...其他组件内的暴露属性和方法 }; } }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Y2000104

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

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

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

打赏作者

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

抵扣说明:

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

余额充值