pinia底层实现原理

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

Pinia 实现的本质原理是：

• 基于 Vue 3 的 Composition API 和响应式系统（reactive、ref）
• 不再区分 Mutation 和 Action，简化了状态更新的方式
• 状态（state）通过 Vue 的 reactive API 实现响应式
• 计算属性（getters）利用 Vue 的 computed
• actions 则是普通方法，可以自由执行异步代码

创建一个store,先导入defineStore，在使用defineStore()定义store;它的第一个参数要求是一个独一无二的名字(也被用作id)，第二个参数可接受两类值：setup函数和option对象。

• defineStore 是 Pinia 提供的核心 API。
• 内部维护 store 单例，以 id 标识 store，保证单一实例。
• 利用 Vue 3 提供的 Composition API 构建响应式对象、计算属性和方法。

optionStore 

与vue选项式api类似，我们可以传入带有state，actions，getters属性的option对象。

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

三个基本概念： 

概念	描述	响应式实现方式
state	存储响应式状态数据	reactive()  或 ref()
getters	类似 computed 计算属性	computed()
actions	可直接修改 state 的方法	普通函数，无需额外封装

setupStore

与vue的组合式api的setup函数类似，我们可以传入一个函数，该函数定义一些响应式属性和方法，并且返回我们想暴露出去的属性和方法的对象。

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)//state属性
  const doubleCount = computed(() => count.value * 2)//getters
  function increment() {//actions
    count.value++
  }

  return { count, doubleCount, increment }
})

使用store

<script setup>
import { useCounterStore } from '@/stores/counter'
import { computed } from 'vue'
// 可以在组件中的任意位置访问 `store` 变量 
const store = useCounterStore()//创建实例
const doubleValue = computed(() => store.doubleCount)
</script>

store 是一个用 reactive 包装的对象，这意味着不需要在 getters 后面写 .value。就像 setup 中的 props 一样，我们不能对它进行解构。

从store解构

为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()。它将为每一个响应式属性创建引用。当你只使用 store 的状态而不调用任何 action 时，它会非常有用。请注意，你可以直接从 store 中解构 action，因为它们也被绑定到 store 上

<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const { name, doubleCount } = storeToRefs(store)
// 作为 action 的 increment 可以直接解构
const { increment } = store
</script>

getters 实现原理（computed） 

• Pinia 的 getters 底层依靠 Vue 的 computed() 实现响应式计算：

const doubleCount = computed(() => state.count * 2);

• 一旦 state 发生变化，自动触发计算更新。