Pinia的使用

1，介绍

Pinia是一个状态管理的工具，作用和Vue2中Vuex相差不多，它实现状态管理分为两种语法：选项式API和组合式API，当前我们讲的是组合式API

2，使用

安装：

yarn add pinia
// or
npm i pinia
// or
pnpm i pinia

导入：

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

// 挂载
createApp(App).use(createPinia()).mount('#app')

创建仓库&使用仓库：

1，引入pinia中的defineStore方法，第一个参数就是该仓库的id,具有唯一性，第二个参数是一个对象，里面就是放置的数据，外面需要的数据需要return出来

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const userDefineStore = defineStore('store', () => {
  const num = ref<number>(0)
  const addNum = () => num.value++

  return {
    num,
    addNum,
  }
})

2，在需要使用的页面上，需要导入使用

<script setup lang="ts">
// 导入仓库
import { userDefineStore } from '../store/index'
// 变量接取
const store = userDefineStore()
</script>
<template>
  <div>
    // 在模板中直接使用store调用即可
    home:{{ store.num }}
    <button @click="store.addNum">HomeNum++</button>
  </div>
</template>

3，我们可以使用解构来接取仓库中的数据、方法，但是这样会丢失响应式，所以我们就要用到storeToRefs。

storeToRefs也是pinia中的一个API，就是用来解决解构数据之后，响应式丢失的问题的，在模板中使用直接写变量名即可，但是在js中使用，需要添加value

<script setup lang="ts">
import { userDefineStore } from '../store/index'
import { storeToRefs } from 'pinia'
const store = userDefineStore()
// 如果此处未使用storeToRefs，num就不是响应式的数据
// 函数表达式不能解构，还是得使用store调用
let { num } = storeToRefs(store)
setTimeout(() => {
  num.value += 3000
}, 3000)
</script>
<template>
  <div>
    home:{{ num }}
    <button @click="store.addNum">HomeNum++</button>
  </div>
</template>