开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第29天，点击查看活动详情

前言

今天起来身体不大舒服，到了中午直接就高烧了，回家躺了一下午，晚上感觉精神状态稍微好了一些，就爬起来继续水水文章吧，状态不佳大家就将就着看，内容有帮助的也可以直接复制代码，望谅解

pinia

简介

vue3发布以后，pinia也随着诞生， 代替 Vuex 做状态管理，比较直观的好处就是不用在区分 同步调用 和 异步调用 了，store 的修改动作 action 作为常规函数调用，而不是使用 dispatch 方法或者是 commit 去调用，当然最重要的还是对 TS 支持比较友好

uniapp 中使用

在uniapp中使用pinia与我们平时使用 npm 安装插件的方式略有不同

使用 HBuilder X 不需要手动安装，直接使用即可

直接在 main.js 引入相关代码

import { createSSRApp } from 'vue';
import * as Pinia from 'pinia';
​
export function createApp() {
    const app = createSSRApp(App);
    app.use(Pinia.createPinia());
    return {
        app,
        Pinia, // 此处必须将 Pinia 返回
    };
}

这样我们就可以全局使用pinia了

添加管理模块

这里我们以一个登录模块为例

在根目录创建文件store/account.js定义好相关属性

import { defineStore } from 'pinia'
​
export const useAccountStore = defineStore('account', {
    state: () => {
        return {
            account: '测试'
        }
    },
    actions: {
        login(account) {
            this.account = account
        }
    }
})

然后就可以在页面中使用了

import { useAccountStore } from '@/stores/account.js'
​
const account = useAccountStore()
// 调用 actions
account.login('测试123')

这里可以通过属性访问的方式调用方法，也可以将方法解构出来，具体看使用习惯即可

数据持久化

使用状态管理时，有时我们会有这样的需求，需要将状态管理的数据存储到本地缓存中，在页面刷新，或者下一次访问时依然生效，uniapp提供了uni.setStorageSync()方法支持各个平台将数据存在本地，单如果需要时每一个单独加不便于管理，这个时候可以使用持久化的缓存插件，会自动把pinia配置的数据存到本地

使用pinia-plugin-unistorage

• 插件市场导入插件

pinia-plugin-unistorage - DCloud 插件市场

• 配置main.js

import { createUnistorage } from './uni_modules/pinia-plugin-unistorage'
​
export function createApp() {
    const app = createSSRApp(App)
    
    // 状态管理
    const store = Pinia.createPinia()
    // 持久化
    store.use(createUnistorage())
    app.use(store)
    
    return {
        app,
        Pinia
    }
}

• 在需要持久化缓存的状态配置好开关，以account.js为例

import { defineStore } from 'pinia'
​
export const useAccountStore = defineStore('account', {
    unistorage: true, // 是否持久化
    state: () => {
        return {
            account: '测试'
        }
    },
    actions: {
        login(account) {
            this.account = account
        }
    }
})

配置好unistorage属性后，Pinia就会自动把相关数据存到缓存里啦

感想

不行了，人好难受，祝大家都身体健康吧，溜了溜了，希望明天会好起来