pardofelis

vue状态管理工具

参考 pinia 学习使用 effectScope API

包名neta了崩三往世乐土商店的老板娘帕朵菲莉丝

安装

import {createApp} from 'vue'
import App from 'App.vue'
import {createFelis} from 'pardofelis'

const app = createApp(App)
const felis = createFelis()
app.use(felis)

定义store

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

const useStore = defineStore({
    id: 'store',
    setup: () => {
        const foo = ref()
        const bar = () => {
            console.log(foo.value)
        }
        return {
            foo,
            bar
        }
    }
})

使用store

import {storeToRefs} from 'pardofelis'

const store = useStore()
store.foo
store.bar()
const {foo} = storeToRefs(store)
foo.value

内置持久化方案

import {defineStore, localStorageRef, sessionStorageRef, storageRef} from 'pardofelis'

const useStore = defineStore({
    id: 'store',
    setup: () => {
        // const foo = localStorageRef('foo', 'foo', {watchStorageChange: true})
        // const foo = sessionStorageRef('foo', 'foo', {watchStorageChange: true})
        const foo = storageRef('foo', 'foo', localStorage, {watchStorageChange: true})
        const bar = () => {
            console.log(foo.value)
        }
        return {
            foo,
            bar
        }
    }
})