Vue3+Pinia+数据持久化 20分钟快速上手

原创

已于 2023-03-23 14:33:53 修改 · 823 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2023-03-22 14:06:22 首次发布

本文介绍了Pinia作为Vue3的状态管理工具，它的特点包括与Vue3语法兼容、支持组合式API、类型安全、支持多仓库以及简单的数据管理。通过示例展示了如何安装、创建和使用Pinia仓库，以及如何通过storeToRefs保持解构后的响应式。此外，还讲解了如何利用pinia-plugin-persistedstate实现数据持久化，并演示了在App.vue中的应用。最后提到了优化代码组织结构的方法，通过统一导出提高代码可读性。

Vue3+Pinia 20分钟快速上手

自我记录

1.Pinia 是一个状态管理工具，它和 Vuex 一样为 Vue 应用程序提供共享状态管理能力。
2.语法和 Vue3 一样，它实现状态管理有两种语法：选项式API 与 组合式API，我们学习组合式API语法。
3.它也支持 Vue2 也支持 devtools，当然它也是类型安全的，支持 TypeScript
4.可以创建多个全局仓库，不用像 Vuex 一个仓库嵌套模块，结构复杂。
5.管理数据简单，提供数据和修改数据的逻辑即可，不像Vuex需要记忆太多的API。
6.Pinia 是一个简单实用的状态管理工具,大小仅有1KB
7.Pinia 官方文档

偷的图
使用步骤

1.安装

yarn add pinia
# 或者使用 npm
npm install pinia

2.导入，实例化，当做插件使用，和其他插件使用套路相同 /src/main.ts

import {
   
    createApp } from 'vue'
// 1. 导入创建pinia的函数
import {
   
    createPinia } from 'pinia'
import App from './App.vue'
// 2. 创建pinia插件实例
const pinia = createPinia()
const app = createApp(App)
// 3. 使用插件
app.use(pinia)
app.mount('#app')

3.创建仓库&使用仓库 /src/stores/counter.ts

import {
   
    defineStore } from "pinia"
// 创建仓库
// 1.id 是仓库的唯一标识，一般文件的名字叫啥就是啥, 方便找对应的仓库 例如 counter.ts
// 2.storeSteup 类似 Vue3 的 setup 作用:函数中定义 数据 和 函数 返回, 它们就是store的数据和函数
// 3.options? 额外的配置
// export const uesCounterStore = defineStore("counter", () => {
   
   
//  return {}
// })
export const uesCounterStore = defineStore('counter', () => {
   
   
    // 定义
    // state
    const count = ref(0)
    // getters
    const doubleCount = computed(() => count.value * 2)
    // mutations (Pinia 不区分 mutations 和 actions)
    const update = () => count.value++
    // actions
    const asyncUpdate = () => {
   
   
        setTimeout(() => {
   
   
            count.value += 1000
        }, 1000)
    }
    return {
   
   count, doubleCount, update ,asyncUpdate}
})

/src/components/Children.vue

<script setup lang="ts">
// 使用仓库
import {
   
    useCounterStore } from "./stores/counter"
// store中有状态和函数
const store =

最低0.47元/天解锁文章