uniapp中pinia的数据监听

310 阅读1分钟

uniapp、vue3中pinia的数据监听

新建个demoStore

这里就不说uniapp中pinia是怎么引入了,这个网上搜有很多

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

const useDemoStore = defineStore('demo', () => {
    // 定义一个state的数据
    const count = ref({
        sendCount: 0,
        receiveCount: 0
    })
    
    return {
        count
    }
})

export default useDemoStore();

在vue中订阅数据变化

<template>
    <view></view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import demoStore from '@/store/demoStore';

onLoad(() => {
    demoStore.$subscribe((args, state) => {
        console.log(state.count.sendCount);
        console.log(state.count.receiveCount);
    })
})

onShow(() => {
    demoStore.count.sendCount = 10;
    demoStore.count.receiveCount = 20;
})
</script>

最后尝试更改demoStore里面的数据即可打印出来