npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pinia-plugin-persist-uni

v1.3.1

Published

[![NPM version](https://img.shields.io/npm/v/pinia-plugin-persist-uni?color=a1b858&label=)](https://www.npmjs.com/package/pinia-plugin-persist-uni) [![NPM downloads](https://img.shields.io/npm/dm/pinia-plugin-persist-uni.svg?style=flat)](https://npmjs.com

Downloads

654

Readme

pinia-plugin-persist-uni

NPM version NPM downloads

前言

尤雨溪在 3 月 24 日晚与掘金合作的直播中提到传送门,pinia 就是实际上的 vuex5,作为新一代的状态管理器,更友好的 ts 支持,更轻量的打包体积,更简化的模块管理,无疑会在将来的市场中备受欢迎。

pinia 的优点相比也不用多说了,但也正是由于其处于一个新生的阶段,周边生态还不够完善,在本人搭建项目的过程中便遇到了 pinia 在 uniapp 中数据持久化的问题。

市场上目前也有一些数据持久化的插件,例如 vuex-persistedstatepinia-plugin-persist,但是服务于 pinia 和 uniapp 的却没有,其中pinia-plugin-persist虽然同样可以满足需求,但是由于其默认数据持久化的方式是 sessionStorage,使用时需要重复的配置,作为一个有手的程序员,当然不能忍,于是便有了pinia-plugin-persist-uni

使用说明

安装

npm i pinia-plugin-persist-uni

配置

Vue2

import Vue from 'vue'
import vueCompositionApi from '@vue/composition-api'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist-uni'
import App from './App.vue'

const pinia = createPinia()
pinia.use(piniaPersist)

Vue.use(vueCompositionApi)
Vue.use(pinia)

new Vue({
  pinia,
  render: (h) => h(App),
}).$mount('#app')

Vue3

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist-uni'

const pinia = createPinia()
pinia.use(piniaPersist)

createApp({}).use(pinia).mount('#app')

Typescript

// tsconfig.json
{
  "compilerOptions": {
    "types": ["pinia-plugin-persist-uni"]
  }
}

基本用法

通过在你的 stroe 中配置 persist, 将会通过 uniAppStorage 来持久化存储你的数据.

请配置 id,用于持久化存储时的 key。

// store/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('storeUser', {
  state: () => {
    id: 'user',
    return {
      firstName: 'allen',
      lastName: 'ttk',
      accessToken: 'xxxxxxxxxxxxx',
    }
  },
  actions: {
    setToken(value: string) {
      this.accessToken = value
    },
  },
  persist: {
    enabled: true,
  },
})

总结

新技术会带给我们更良好的开发体验,但是我们同样应该关注其社区环境,并力所能及的贡献出自己的一份力量。本插件开发的新路历程也是基于目前pinia的生态环境中没有专门服务于uniapp数据持久化插件。

该项目也是参考了vuex-persistedstatepinia-plugin-persist,保持了使用习惯的同时又简化了使用配置。同时在搭建项目的过程中也接触到了github-pages以及github actions的配置使用,实现了说明文档自动部署和 npm 自动发包,可谓是收获满满。

相关内容

对你有帮助或者喜欢的话请点个 Star。

参考