一、pinia是什么？

• pinia是vue专属的状态管理库

核心概念 store

Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。

二、为什么使用pinia？

pinia是vue专属的状态管理工具，它允许你跨组件或页面共享状态。

亮点

• 完整的TypeScript支持
• 轻便（体积约1kb）
• store中的actions配置项同时支持同步异步方法
• 模块不需要嵌套，可以声明多个store
• 支持vue-tools，ssr（服务端渲染）和webpack代码拆分
• 热更新
  • 不必重载页面即可修改 Store
  • 开发时可保持当前的 State
• 插件：可通过插件扩展 Pinia 功能 eg:状态持久化插件 pinia-persistedstate-plugin

三、pinia怎么用？

安装

• yarn add pinia
• npm install pinia

创建实例并挂载到根组件

  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')

示例

• 创建一个store

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

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

• 在组件中使用

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()

    counter.count++
    // 带有自动补全 ✨
    counter.$patch({ count: counter.count + 1 })
    // 或者使用 action 代替
    counter.increment()
  },
}

• storeToRefs 将state，getters变成一个响应式的变量，从store中解构出来的数据都是响应式的