在uniapp中使用pinia

小禾青青2025-11-21 21:02

引入pinia-plugin-persistedstate实现数据持久化

javascript 复制代码

import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate' // 数据持久化

const store = createPinia()
// 使用持久化插件，适配 UniApp 的存储 API
store.use(
  createPersistedState({
    storage: {
      getItem: (key) => uni.getStorageSync(key),
      setItem: (key, value) => uni.setStorageSync(key, value),
      removeItem: (key) => uni.removeStorageSync(key),
    },
  }),
)

export default store

// 模块统一导出
export * from './user'

核心API

defineStore：

第一个参数是id，

第二个参数可接受两类值：Setup 函数或 Option 对象。

javascript 复制代码

// Option 对象
export const useCounterStore = defineStore('counter', {
  state: () => ({ 
    count: 0, 
    name: 'Eduardo' 
  }),
  
  getters: {
    doubleCount: (state) => state.count * 2,
    greeting: (state) => `Hello, ${state.name}!`,
  },
  
  actions: {
    increment() {
      this.count++
    },
    updateName(newName) {
      this.name = newName
    },
  },
  
  // 持久化配置
  persist: {
    key: 'counter-store', // 自定义存储键名
    paths: ['count'], // 只持久化 count 状态
  },
})

javascript 复制代码

// Setup 函数
import { defineStore } from 'pinia'
import { ref } from 'vue'

const initState = {
  token: '',
  userid: '',
  username: '',
  realname: '',
  welcome: '',
}

export const useUserStore = defineStore(
  'user',
  () => {
  //相当于state
    const userInfo = ref<IUserInfo>({ ...initState })

	//相当于actions
    const setUserInfo = (val: IUserInfo) => {
      if(val?.loginTenantId){
        val.tenantId = val.loginTenantId;
      }
      userInfo.value = val
    }
    const clearUserInfo = () => {
      userInfo.value = { ...initState }
    }
    const getUserInfo = () => {
      return userInfo.value
    }
    const editUserInfo = (options) => {
      userInfo.value = { ...userInfo.value, ...options }
    }
    const setTenant = (tenantId) => {
      userInfo.value.tenantId = tenantId;
    }
    const getTenant = () => {
      return userInfo.value.tenantId;
    }
    const reset = () => {
      userInfo.value = { ...initState }
    }
    
    //相当于getters
    const isLogined = computed(() => !!userInfo.value.token)
    return {
      userInfo,
      setUserInfo,
      getUserInfo,
      clearUserInfo,
      setTenant,
      getTenant,
      isLogined,
      editUserInfo,
      reset,
    }
  },
  {
    // 如果需要持久化就写 true, 不需要持久化就写 false（或者去掉这个配置项）
    persist: true,
  },
)