Pinia使用storeToRefs解构失去响应，忘记使用.value获取了

这篇笔记主要记录

1. 使用storeToRefs解构，解构后要加.value使用，不然是没响应的
2. actions 是可以直接解构的
   

storeToRefs解构失去响应

Pinia使用storeToRefs解构，发现数据失去响应，最后发现忘记使用.value获取解构后的属性、数据。

定义的store代码如下

import { defineStore } from 'pinia'
import { fetchSpaceMapStreetTotal } from '@/service/api'

interface StreetState {
  streetList: any[];
}
export const useStreetStore = defineStore('street', {
  state: (): StreetState => ({
    streetList: [], //  Array<object | null> // 地图街道统计数据
  }),
  actions: {
    async setStreetList() {
      try {
        const res = await fetchSpaceMapStreetTotal({ parentId: '440310' });
        this.streetList = res;
      } catch (error) {
        console.error('Failed to fetch street list:', error);
      }
    }
  }
});

组件里使用store数据

<script setup lang="ts">
  import { useStreetStore } from '@/store'
  import { storeToRefs } from 'pinia'
  
  const streetStore = useStreetStore()
  // 使用storeToRefs获取
  const { streetList } = storeToRefs(streetStore)
  const { setStreetList } = streetStore // Extract the action directly from the store
  
  // 页面加载的时候请求接口数据
  setStreetList()

  // 获取街道统计数据 监听 streetStore streetList
  // 这里要用.value 不然会丢失响应
  watch(
    () => streetList.value,
    () => {
      if (streetList.value.length) {
        console.log('streetList.length', streetList.value.length)
        addAreaTotal(streetList.value)
      }
    },
  )
</script>

这个代码 const { streetList } = storeToRefs(streetStore), 很容易就代入ES 6的思维惯性，直接使用解构后的属性，数据。开始直接用streetList, 发现不会触发监听了，要用streetList.value.

Pinia store 直接解构action

action可以直接解构，因为action是直接绑定到store对象上的, 文档链接.

  const streetStore = useStreetStore()
  const { setStreetList } = streetStore // Extract the action directly from the store