美文网首页
uniapp vue3版本 使用pinia并对数据持久化存储

uniapp vue3版本 使用pinia并对数据持久化存储

作者: 略懂一点html | 来源:发表于2024-08-05 14:17 被阅读0次

第一步:配置pinia (main.js)

pinia 不用安装,框架自带了,直接导入就行了

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';
export function createApp() {
  const app = createSSRApp(App)
  const store = Pinia.createPinia()
  app.use(store)
  return {
    app,
    Pinia
  }
}
// #endif

第二步:项目根目录新建一个store(随便取一个名称都行)文件夹,在此文件夹里新建一个pinia模块js,例如:user.js

// user.js
import { defineStore } from 'pinia';
export const useAppStore = defineStore('user', {
  state: () => {
      return {
          userInfo: {},
          isLogin: false,
      }
  },
  getters: {
     app_userInfo: (state) => state.userInfo,
     app_isLogin: (state) => state.isLogin
  },

  actions: {
    // 设置数据
    async setData(key,data){
      this[key] = data
    },
    // 获取数据
    getData(key){
      return this[key]
    },
  }
});

第三步:在页面中使用

script中使用

<script setup>
    import { useAppStore } from '@/store/user';
    const appStore = useAppStore();
    // 设置用户信息(自定义函数设置数据)不喜欢这种方式的,可以用正经的方式设置,反正都是传参进去赋值
    appStore.setData('userInfo', {
        name: '张三',
        age: 18
    });
    
    // 获取userInfo==actions自定义函数方式获取
    let userInfo1 = appStore.getData('userInfo');
    // 获取userInfo==getters方式获取
    let userInfo2 = appStore.user_userInfo;
    
</script>

template中使用

<template>
    <view class="content">
        <view class="">
            <!-- getters方式 -->
            {{appStore.user_userInfo}}
        </view>
        <view class="">
            <!-- actions自定义函数方式 -->
            {{appStore.getData('userInfo')}}
        </view>
        
    </view>
</template>

数据持久化

安装这个持久化插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

yarn add pinia-plugin-persistedstate

pnpm i pinia-plugin-persistedstate

修改一下main.js代码

// #ifdef VUE3
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';
import { createPersistedState } from 'pinia-plugin-persistedstate' //引入持久化插件
// 写个方法,配置一下持久化插件
const createPersistUni = () => {
    return createPersistedState({
        storage: {
            getItem: uni.getStorageSync,
            setItem: uni.setStorageSync
        }
    })
}
export function createApp() {
  const app = createSSRApp(App)
  const store = Pinia.createPinia()
  // 使用持久化插件
  store.use(createPersistUni());
  app.use(store)
  return {
    app,
    Pinia
  }
}
// #endif

再修改一下user.js里的代码 增加这个字段 persist: true

import {
    defineStore
} from 'pinia';
export const useAppStore = defineStore('user', {
    state: () => {
        return {
            userInfo: {},
            isLogin: false,
        }
    },
    getters: {
        user_userInfo: (state) => state.userInfo,
        user_isLogin: (state) => state.isLogin
    },
    actions: {
        // 设置数据
        async setData(key, data) {
            this[key] = data
        },
        // 获取数据
        getData(key) {
            return this[key]
        },
    },
    persist: true //  开启持久化
});

好了,完事儿了

相关文章

  • Vue3 + Pinia 持久化存储

    1 前言 本文使用 Pinia 及插件 pinia-plugin-persist 做持久化存储,避免修改 stor...

  • ReactNative之AsyncStorage本地存储

    ReactNative之本地存储 在RN开发中,持久化存储数据,可以使用AsyncStorage,对原生的API进...

  • Android SharePreferences存储

    android数据持久化的轻量级存储方案,SharePreferences是使用键值对进行存储的,意思就是当你保存...

  • iOS数据持久化

    Title: iOS数据持久化 ##数据持久化概念 数据持久化就是将内存中的数据模型转换为存储模型,以及将存储模型...

  • iOS: 数据持久化方案

    种类: plist存储:使用XML键值对持久化,它适用于少量且数据基本不怎么改变的情况。 偏好存储:使用...

  • Hyperledger Fabric 数据持久化

    Hyperledger Fabric 数据持久化版本v1.4.0 将每个容器需要持久化存储的目录挂载出来,即使将所...

  • Swift 4.0 Codable

    一、简介 我们可以使用NSCoder或Codable协议来持久化数据,并使用NSKeyedArchiver来持久化...

  • vue3使用pinia管理状态

    Pinia pinia 是一款新的vue3的状态管理库,完整的typescript支持。 安装 创建根store并...

  • reactnative 数据持久化(一)

    rn 数据持久化 数据持久化 data 》 手机存储空间 rn rn中比较常用的数据持久化存储方式有两种: Asy...

  • prometheus+influxdb+grafana

    使用influxdb 作为prometheus持久化存储和使用mysql 作为grafana 持久化存储的安装方法...

网友评论

      本文标题:uniapp vue3版本 使用pinia并对数据持久化存储

      本文链接:https://www.haomeiwen.com/subject/pcntkjtx.html