在小程序中使用 pinia
安装 pinia
创建 store 文件夹用来管理状态
store/index.js1 2 3 4 5
| import { createPinia } from "pinia"
const store = createPinia() export default store
|
在 mian.js 中引入 pinia
main.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| import Vue from "vue" import App from "./App"
Vue.config.productionTip = false
App.mpType = "app"
const app = new Vue({ ...App, }) app.$mount()
import { createSSRApp } from "vue" import pinia from "./store/index.js" import App from "./App.vue" export function createApp() { const app = createSSRApp(App) app.use(pinia) return { app, } }
|
创建 store 及在页面中使用
详情见pinia一章
在小程序中实现数据的持久化存储
在一些时候,我们需要持久化存储一些数据,保证页面刷新后还能拿到对应的数据
我们可以使用 uni-app 的数据存储方法,uni-app 的数据存储和获取方法可以做到直接存储对象或数组到本地缓存中。我们可以利用这个来做。
存储数据/获取数据/删除数据的简易封装
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| export default { get(key) { try { return uni.getStorageSync(key) } catch (e) { console.error(e) } }, set(key, value) { try { uni.setStorageSync(key, value) } catch (e) { console.error(e) } }, remove(key) { try { uni.removeStorageSync(key) } catch (e) { console.error(e) } }, }
|
存储数据键值对的封装
我们可以参考 ts 的 enum,将要存储到 storage 中的 key 和程序中的 key 分离开来,后期要修改 storage 中的键时,程序部分只需改动该文件即可
1 2 3 4
| export default { TOKEN: "TOKEN", USER_INFO: "USER_INFO", }
|
此时,我们存入本地存储的 key 为 TOKEN 和 USER_INFO, 如果我们想将 TOKEN 更改为 USER_TOKEN 的话,也只需要改动该文件即可
{1}1 2 3 4
| export default { TOKEN: "USER_TOKEN", USER_INFO: "USER_INFO", }
|
在对应仓库中使用
这里用 useUserStore 举例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| import { defineStore } from "pinia"
import Enmu from "@/enmu/index.js" import PerStorage from "@/utils/PerStorage.js"
export const useUserStore = defineStore("user", { state: () => { return { userInfo: null, token: "", } }, getters: { getUserInfo() { return this.userInfo || PerStorage.get(Enmu.USER_INFO) || {} }, }, actions: { setUserInfo(userInfo) { this.userInfo = userInfo PerStorage.set(Enmu.USER_INFO, userInfo) }, }, })
|