Pinia 和 Vuex

Vuex： State、Gettes、Mutations(同步)、Actions(异步)

Pinia： State、Gettes、Actions(同步异步都支持)

Vuex 当前最新版是 4.x

• Vuex4 用于 Vue3
• Vuex3 用于 Vue2

Pinia 当前最新版是 2.x

• 即支持 Vue2 也支持 Vue3

就目前而言 Pinia 比 Vuex 好太多了，解决了 Vuex 的很多问题，所以也非常建议直接使用 Pinia，尤其是 TypeScript 的项目

安装 pinia

pnpm install pinia@next

uni-app 项目需解决持久化插件兼容性问题

安装持久化存储插件： pinia-plugin-persistedstate

pnpm i pinia-plugin-persistedstate

在 src下新建store文件夹：

//  src/store/index.ts 
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)

// 默认导出，给 main.ts 使用
export default pinia

在 main.ts 中导入 store/index.ts

import { createSSRApp } from 'vue'
import pinia from './stores'

import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)

  app.use(pinia)
  return {
    app,
  }
}

基本用法：

import { defineStore } from 'pinia'
import { ref } from 'vue'

// 定义 Store
export const useMemberStore = defineStore(
  'member',
  () => {
    // 会员信息
    const profile = ref<any>()

    // 保存会员信息，登录时使用
    const setProfile = (val: any) => {
      profile.value = val
    }

    // 清理会员信息，退出时使用
    const clearProfile = () => {
      profile.value = undefined
    }

    // 记得 return
    return {
      profile,
      setProfile,
      clearProfile,
    }
  },
  // TODO: 持久化
  {
    persist: true,
  },
)

插件默认使用 localStorage 实现持久化，小程序端不兼容，需要替换持久化 API

多端兼容

• 网页端持久化 API

// 网页端API
localStorage.setItem()
localStorage.getItem()

• 多端持久化 API

// 兼容多端API
uni.setStorageSync()
uni.getStorageSync()

参考代码

// stores/modules/member.ts
export const useMemberStore = defineStore(
  'member',
  () => {
    //…省略
  },
  {
    // 配置持久化
    persist: {
      // 调整为兼容多端的API
      storage: {
        setItem(key, value) {
          uni.setStorageSync(key, value) 
        },
        getItem(key) {
          return uni.getStorageSync(key) 
        },
      },
    },
  },
)

以上就是今天写的内容啦，希望和大家一起共同学习，如果有错误希望给我回复喔O(∩_∩)O~