Pinia学习笔记

Pinia官方中文文档

一、安装

安装 Pinia

通过以下命令使用 npm 包管理器安装 Pinia

npm install pinia

使用 Pinia

创建一个Pinia实例并传给应用程序

//main.js

import { creatPinia } from 'pinia'

app.use(creatPinia())

二、Store

定义 Store

通过从pinia模块解构的defineStore()函数进行定义，该函数的第一个参数name，也称为id，是必要的，Pinia使用它来将store连接到devtools。将返回的函数命名为use...是跨可组合项的约定。

//stores/userStore.js

import { defineStore } from 'pinia'

export const useUserStore = defineStore('userStore', {
    //...
})

使用 Store

选项式 API 中通过setup()使用

import { useUserStore } from '@/stores/userStore'

export default {
    setup() {
        const user = useUserStore()
        return {
            user
        }
    }
}

组合式 API 中使用

<script setup>
import { useUserStore } from '@/stores/userStore'

const user = useUserStore()

</script>

从 Store 中解构属性并同时保持其响应式

• 组合式 API

  <script setup>
  import { storeToRefs } from 'pinia'
  import { useUserStore } from '@/stores/userStore'
  
  const user = useUserStore()
  const { name, age } = storeToRefs(user)
  
  </script>
  

• 使用setup()的选项式 API

  import { storeToRefs } from 'pinia'
  import { useUserStore } from '@/stores/userStore'
  
  export default {
      setup() {
          const user = useUserStore()
          const { name, age } = storeToRefs(user)
          return {
              name,
              age
          }
      }
  }
  

三、State

定义 State