preface

Pinia is the de facto Vex5, as mentioned in a live link with the Nuggets on The evening of March 24. As a new generation of state manager, with friendlier TS support, lighter package size, and simplified module management, pinia will undoubtedly be popular in the future market.

There is no need to say more about Pinia’s advantages, but just because pinia is in a new stage and the surrounding ecology is not perfect, I encountered the problem of pinia’s data persistence in UniApp in the process of building the project.

There are also plug-ins for data persistence, such as Vuex-PersistedState and Pinia-plugin-persist, but not for Pinia and UniApp. Pinia-plugin-persist is the default data persistence mode, but sessionStorage is the default data persistence mode, which requires repeated configuration. As a programmer with a hand, of course, cannot tolerate it. Hence the pinia-plugin-persist-uni.

Directions for use

The installation

npm i pinia-plugin-persist-uni

configuration

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')
Copy the code

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')
Copy the code

Typescript

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

Basic usage

By configuring persist in your stroe, your data will be persisted through uniAppStorage.

Configure the ID as the key for persistent storage.

// 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,}})Copy the code

conclusion

New technologies will make for a better development experience, but we should also pay attention to the community and contribute as much as we can. The new development process of this plug-in is also based on the fact that there is no data persistence plug-in specifically serving UniApp in the current pinia ecosystem.

This project also references vuex-PersistedState and Pinia-plugin-persist to maintain usage habits while simplifying configuration. At the same time, in the process of building the project, I also came into contact with the configuration and use of Github pages and Github Actions, and realized the automatic deployment of description documents and automatic package delivery of NPM, which can be said to be fruitful.

At present the source code has been released to Github, details see source address description document use case, if you are helpful or like, please click a Star.

reference

  • vuex-persistedstate
  • pinia-plugin-persist