ai问答：Vue3中使用computed和watch监听pinia数据的区别

合集 - ai问答(7)

1.ai问答：使用 Vue3 组合式API 和 TS 封装 echarts 折线图2023-04-232.ai问答：使用vite如何配置多入口页面2023-04-233.ai问答：使用 Vue3 组合式API 和 TS 父子组件共享数据2023-04-244.ai问答：使用 Vue3 组合式API 和 TS 封装 websocket 断线重连2023-04-245.ai问答：使用 Vue3 组合式API 和 TS 配置 axios 拦截器 http错误状态2023-04-246. ai问答：vue3+pinia+WebSocket 封装断线重连（实战）2023-05-08

7. ai问答：Vue3中使用computed和watch监听pinia数据的区别2023-06-09

收起

在Vue3中,通过computed来监听pinia中的state数据：

import { defineStore } from 'pinia'
import { useStore } from 'pinia'
import { computed } from 'vue'
 
const store = defineStore('store', {/* ... */})
 
export default {
  setup() {
    const doubledCount = computed(() => {
      return useStore().count * 2
    })
    
    return {
      doubledCount
    }
  }
}

这里,通过computed()创建一个计算属性doubledCount,在getter函数中使用useStore()获取pinia的state,并返回计算后的值。
那么doubledCount就会依赖store.count,当store.count变化时,doubledCount也会更新。

watch

import { defineStore } from 'pinia'
import { useStore } from 'pinia'
import { watch } from 'vue'
 
const store = defineStore('store', {/* ... */})
 
export default {
  setup() {
    const localCount = useStore().count
    
    watch(localCount, (newValue) => {
      // 监听localCount,当store.count变化时也会触发
      console.log(newValue)
    })
  }
}

这里,通过useStore()从pinia state中获取localCount。
然后通过watch来监听localCount,因为localCount依赖store.count,所以当store.count变化时,watch的回调也会触发,实现了pinia state变化的响应。