Pinia学习笔记--组合式API

1.什么时候用Pinia

很多组件都用到的数据，比如登录用户的信息等可以使用Pinia。如果数据不是很复杂，而且一两个组件之间进行通信，不应该使用Pinia。
官网链接：(应该在什么时候使用 Store? | Pinia)

2.安装Pinia

# pnpm 安装
pnpm add pinia

# 其它包管理工具安装
yarn add pinia

npm install pinia

我们需要创建一个文件夹叫stores：

index.js:

import { createPinia } from "pinia"

//createPinia方法可以用于创建大仓库
const pinia = createPinia()

export default pinia

//统一用index.js导出
import { useUserStore } from "@/stores/modules/userInfo.js"
export { useUserStore }

为了方便导出，我们可以把所有模块都在index.js中导进来，然后进行统一导出，这样做的好处是，以后在组件中使用，我们只需要从index.js中导入所需要的模块。

userInfo.js:

//导入仓库api
import {defineStore} from "pinia"
import {ref} from "vue"

//创建小仓库
export const useUserStore = defineStore(
    'userInfo',
    () => {
        const userInfo = ref({
            name: '张三',
            age: 18,
            sex: '男',
            height: 180,
            weight: 60
        })

        //更改用户名
        const changeName = (name) => {
            userInfo.value.name = name
        }

        //一定要返回一个对象，返回的对象中的属性和方法可以提供给组件使用
        return {
            userInfo,
            changeName
        }
    })

main.js:

import { createApp } from 'vue'

//导入Pinia
import pinia from "@/stores/index.js"

import App from './App.vue'
import router from './router'
import vuetify from "@/plugins/vuetify.js"

const app = createApp(App)
//安装Pinia
app.use(pinia)
app.use(router)
app.use(vuetify)
app.mount('#app')

3.在组件中使用

<script setup>
import { useUserStore } from "@/stores/index.js"

const userStore = useUserStore()

</script>

<template>
  <div class="bg-blue h-100 w-100">
    <p>{{userStore.userInfo}}</p>
    <v-btn @click="userStore.changeName('akbar')" class="text-black">更新name</v-btn>
  </div>
</template>

说实话，这种组合式API写法太爽了！

4.Pinia持久化

Pinia实现持久化存储，需要安装一个插件叫# Pinia Plugin Persistedstate。
npm链接：(pinia-plugin-persistedstate - npm)

pnpm add pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate

在index.js中导入持久化插件：

import { createPinia } from "pinia"
//持久化插件
import piniaPluginPersistedState  from "pinia-plugin-persistedstate"

//createPinia方法可以用于创建大仓库
const pinia = createPinia()
// 使用持久化插件
pinia.use(piniaPluginPersistedState)

export default pinia

//统一用index.js导出
import { useUserStore } from "@/stores/modules/userInfo.js"
export { useUserStore }

然后在userInfo.js中启用持久化存储：

//导入仓库api
import {defineStore} from "pinia"
import {ref} from "vue"

//创建小仓库
export const useUserStore = defineStore(
    'userInfo',
    () => {
        const userInfo = ref({
            name: '张三',
            age: 18,
            sex: '男',
            height: 180,
            weight: 60
        })

        //更改用户名
        const changeName = (name) => {
            userInfo.value.name = name
        }

        //一定要返回一个对象，返回的对象中的属性和方法可以提供给组件使用
        return {
            userInfo,
            changeName
        }
    },
    //启用相数据持久化存储
    {
        persist: true
    }
)

在控制台输出localStorage：