4. Pinia 基本使用

一、关于Pinia

1. pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。
2. pinia支持vue2 和 vue3，支持TypeScript。
3. 模块化管理推荐 扁平化管理，而非嵌套管理。
4. 官方文档：https://pinia.vuejs.org/zh/introduction.html

二、安装与挂载

1. 创建 store 实例对象

（1）使用 defineStore() 创建一个store实例对象。（返回值实际是一个 函数，调用后才会生成store实例对象）
（2）第一个参数是 store实例的 唯一ID。
（3）第二个参数可以是一个 对象，包含state、actions 与 getters 属性。（选项式）

import { defineStore } from 'pinia'

// 第一个参数是你的应用中 Store 的唯一 ID。
export const useMyFirstStore = defineStore('people', {
  state: () => ({ age: 20, name: '张三' }),
  getters: {
    doubleAge: (state) => state.age* 2,
  },
  actions: {
    incrementAge() {
      this.age++
    },
  },
})

（4）第二个参数也可以是一个 函数，在函数内部定义属性和方法，并 return 出去。（组合式）
① ref() 就是 state 属性；computed() 就是 getters；function() 就是 actions。
② 必须返回 state 的 所有属性，这意味着，你不能在 store 中使用 私有属性。
③ 可以使用全局提供的属性，比如 路由。任何应用层面提供的属性都能在store中使用 inject() 访问，就像在组件中一样。

export const useCounterStore = defineStore('people', () => {
  const age= ref(0)
  const name = ref('张三')
  const doubleAge = computed(() => age.value * 2)
  function incrementAge() {
    age.value++
  }

  return { age, name, doubleAge, incrementAge }
})

2. main.js挂载 store

3. 组件中使用 store

（1）导入我们自定义的 store实例对象。

<script setup>
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
</script>

三、创建与使用 state

四、创建与使用 actions

五、创建与使用 getter