pinia-vue-mini

另一个适配 vue-mini 的 Pinia（精简版）。

Important

项目当前处于 Beta 阶段

安装

npm i pinia-vue-mini

yarn add pinia-vue-mini

pnpm i pinia-vue-mini

使用

创建 Pinia 实例

// app.ts
import { createApp } from 'vue-mini'
import { createPinia } from 'pinia-vue-mini'

createApp(() => {
  createPinia()
});

定义 Store

Warning

pinia-vue-mini 仅支持 setupStore

// counter.ts
import { defineStore } from 'pinia-vue-mini'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  return { 
    count, 
    double, 
    increment 
  }
})

使用 Store

使用方式与 Pinia 基本一致

// page.ts
import { definePage } from 'vue-mini/core'
import { useCounterStore } from './store'

definePage(() => {
  const counter = useCounterStore()
  
  return {
    count: counter.count,
    double: counter.double,
    increment: counter.increment
  }
})

Warning

和 Pinia 一样，直接解构 store 会丢失响应式，如需要响应式，请使用 storeToRefs 或 使用 .[prop name] 的形式单独赋值返回

以下用法会导致响应式丢失

// page.ts
import { definePage } from 'vue-mini/core'
import { useCounterStore } from './store'

definePage(() => {
  const counter = useCounterStore()
  
  return {
    ...counter  
  }
})

storeToRefs

为了 store 可以解构使用，pinia-vue-mini 和 Pinia 一样，提供了 storeToRefs 方法，该方法会返回一个引用对象，包含 store 的所有 state、 getter。类似于 toRefs()，所以 method 和非响应式属性会被完全忽略。

// page.ts
import { definePage } from 'vue-mini/core'
import { useCounterStore } from './store'

definePage(() => {
  const counter = useCounterStore()
  const { count, double } = storeToRefs(counter)
  
  return {
    count,
    double,
  }
})

数据持久化

pinia-vue-mini 支持数据持久化，只需在 defineStore 使用 persist 配置即可。

import { defineStore } from 'pinia-vue-mini'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)

  return { count }
}, { 
  persist: true 
})

Warning

目前只支持 ref 和 reactive 类型的数据持久化，暂不支持其他类型。