Vue3 使用pinia+pinia-plugin-persist setup写法

Nithumahel

已于 2023-12-19 15:58:05 修改

阅读量2.9k

点赞数 4

分类专栏： vitejs+vue3+pinia 前端文章标签：前端 javascript vue.js

于 2022-06-20 12:05:09 首次发布

本文链接：https://blog.csdn.net/nithumahel/article/details/125369750

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

vitejs+vue3+pinia

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue3项目中结合Vite和Pinia进行状态管理，并通过pinia-plugin-persist实现数据持久化。作者详细展示了从安装依赖、配置main.ts、创建store到在组件中使用state的步骤，最终实现在页面刷新后仍能保持加载状态。

摘要由CSDN通过智能技术生成

最近项目技术更新，决定用vitejs+vue3+pinia重写项目。我们决定一步到位直接script setup方式来写，边学边写边记录：

1、先安装

npm i pinia-plugin-persist

2、main.ts中引入

import {createPinia} from 'pinia'
import App from './App.vue'
import router from './router/index'
import piniaPersistPlugin from 'pinia-plugin-persist'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPersistPlugin)
app.use(pinia)
app.use(router)
app.mount('#app')

3、新建store/index.ts，然后添加store的总管理脚本：

//import { storeToRefs } from 'pinia'
import appStore from './modules/appStore'
//import userStore from './modules/userStore'


export default {
  appStore,
 // userStore,
}

4 、在store文件夹下创建：/modules/appStore.ts文件：

import {defineStore} from 'pinia'
import {ref} from 'vue'
import loginStore from './loginStore'
const useAppStore = defineStore(
  'appStore',
  () => {
    let loadNum = ref(0)
    const hideLoading = () => {
      loadNum.value--
    }
    const showLoading = () => {
      loadNum.value++
    }
    const isLoading = () => {
      return loadNum.value > 0
    }
    return {
      hideLoading,
      showLoading,
      isLoading
      // loadNum要持久化保存到本地一定要加，当然不加数据响应是没问题的，isLoading也会重新计算，就是不会保存
    }
  }
  //作为第三个参数配置
  // {
  //   persist: {
  //     enabled: true,
  //     strategies: [{storage: localStorage, paths: ['loadNum']}]
  //   }
  // }
)

export default {
  loginStore,
  useAppStore
}

5、ui上的使用

<template>
  <button @click="onButton">点击增加</button>
</template>
<script lang="ts" setup>
import store from '@/store'
const appStore = store.useAppStore()
const onButton = () => {
  appStore.showLoading() //调用
}
</script>
<style lang="scss" scoped></style>

6、看效果

点击之后