pinia 是 Vue 新出的状态管理插件（其实就是VueX5），支持 Vue2 和 Vue3，支持组件形式和组合式API形式

相比老版本VueX的区别

弃用了 mutation
对TS支持度更高
模块间关系不再为树状，更为扁平化

基本用法

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // 也可以这样定义
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

或使用组合式API定义：

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

最终需要被vue实例使用：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

注意，createPinia 创建Pinia实例（通常一个Vue项目中只存在一个），defineStore创建模块。模块实例化时需传入Pinia实例，则模块实例成员指向该Pinia（同一Pinia下，同一模块多个实例成员状态共用）。
通常在main.js中通过app.use(pinia)触发pinia的install方法，此后模块实例化时可不传入pinia实例，默认即使用该pinia实例。若未使用该方法，又没有传入pinia实例，则报错：getActivePinia was called with no active Pinia. Did you forget to install pinia?

defineStore

• 第一个参数应为独特的命名，用于devtools中显示。
• 第二个参数为配置项对象，或一个setup函数。
• 返回值是一个函数，通常以useXXXStore格式命名。
  函数调用后会返回一个reactive包装的对象。

state

类似VueX的state，但必须写在函数返回值里。
可直接store.XXX调用。

const useStore = defineStore('storeId', {
  state: () => {
    return {
      // 用于初始化空列表
      userList: [] as UserInfo[],
      // 用于尚未加载的数据
      user: null as UserInfo | null,
    }
  },
})

interface UserInfo {
  name: string
  age: number
}

state的成员可以直接修改，也可以通过$patch修改，还可以通过$reset重置：

const store = useStore()
store.count++
store.$patch({
  count: store.count + 1,
  age: 120,
  name: 'DIO',
})
store.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})
store.$reset()

---

getters

类似VueX的getters，可直接store.XXX调用。

export const useStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  getters: {
    // 自动推断出返回类型是一个 number
    doubleCount(state) {
      return state.count * 2
    },
    // 返回类型**必须**明确设置
    doublePlusOne(): number {
      // 整个 store 的 自动补全和类型标注 ✨
      return this.doubleCount + 1
    },
  },
})

---

actions

既支持同步也支持异步，且直接通过store.xxx()调用即可。
在方法中通过this访问当前store实例。

其他辅助函数

mapStores()、mapState() 或 mapActions()，类似VueX