pinia 解构赋值

Pinia 是 Vue.js 的状态管理库，它提供了一种现代、简单且灵活的方式来管理应用中的状态。在 Pinia 中，解构赋值通常用于从 store 中提取状态（state）、getter 或 action。

在 Pinia 的 store 中，你可以通过解构赋值来访问特定的 state 或者 getter。比如，假设有一个名为 `counterStore` 的 Pinia store，它有 state 和 getter：

// store/counterStore.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 };
  },
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++;
    }
  }
});

当你想要在组件中使用这个 store 的 `count` 状态和 `doubleCount` getter 时，你可以这样解构它们：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script>
import { useCounterStore } from '../stores/counterStore';

export default {
  setup() {
    const counterStore = useCounterStore();
    // 解构赋值提取状态和getter
    const { count, doubleCount } = counterStore;

    return { count, doubleCount };
  },
};
</script>

使用解构赋值的好处是代码更简洁，直接访问所需的状态和计算属性，不需要每次都通过 store 实例来获取它们。