将store中的state状态解构出来

从state中直接解构出来的状态是不具有响应式的。

<template>
  <div>
    <div>不是解构的{{ userStore.username }} // 李四
    </div>
    <div>解构出来的：{{ username }}</div> // 张三
    <button @click="change">change</button>
  </div>
</template>

<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'
// import { storeToRefs } from 'pinia'

const userStore = useUserStore()

const { username } = userStore

const change = () => {
  userStore.$patch(state => {
      state.username = '李四'
  })
}
</script>

想要从state中将状态解构出来，并且不丢失响应式，那么就需要借助Pinia官方提供的一个APIstoreToRefs。

storeToRefs

storeToRefs：是一个函数，接收一个对象类型的参数，实际上它和Vue的toRefs是一个用法。

<template>
  <div>
    <div>不是解构的{{ userStore.username }} // 李四
    </div>
    <div>解构出来的：{{ username }}</div> // 李四
    <button @click="change">change</button>
  </div>
</template>

<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()

const { username } = storeToRefs(userStore)

const change = () => {
  userStore.$patch(state => {
      state.username = '李四'
  })
}
</script>