三分钟学完Pinia

一、引言

1.干什么的

状态管理：保存一些状态，方便在各个组件之间共享，类似Redis的使用场景

2.使用场景

比如说我的vue项目，有各个组件，在每个组件中去获取已经登录的用户信息，那有几种办法？

1. 通过路由传参（vue-router）
2. 通过父子组件传值

而pinia的思想就是，由pinia做状态管理，保存在各个组件之间共享的数据，这样如果某一个组件想使用数据，直接从pinia中去获取即可，而且这个数据的变化会被各个组件感知到，这就是响应式

3.基本概念

**数据单元：**用来存储某一种数据，可以使用defineStore定义一个数据单元，单元之间数据隔离。

1. State：核心数据
2. Getter：数据获取
3. Action：数据操作

二、上手

1.定义

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

在src下新建stores文件夹，新建一个js文件

import { defineStore } from 'pinia'

// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})

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

2.使用store

<script setup>
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
</script>

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

3.setup 语法

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

  return { count, doubleCount, increment }
})

在 Setup Store 中：

• ref() 就是 state 属性
• computed() 就是 getters
• function() 就是 actions