前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第九章登录开发 (Pinia的使用和数据持久化)

本文介绍: 本文介绍了简单介绍了如何在项目中使用 `Pini a`。其优势包括支持 `dev–tools`、热模块更换、插件扩展、提供良好的 `Ty p eSc rip t` 支持和服务器端渲染支持等。介绍了如何安装和配置 `Pini a`，以及使用 `pinia–plugin–p e rs i ste d state` 插件可实现数据持久化，提升系统稳定性和用户体验。上文中的配置代码可在 `github` 仓库中直接 `copy`。

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

详情见官网：Pinia

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

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

在这里插入图片描述

import { createPinia } from 'pinia'

const store = createPinia()

export default store

import { defineStore } from 'pinia'
import { Local } from '@/cache'

const useUserStore = defineStore('user', {
  state: () =&gt; ({
    userInfo: {
      id: '',
      username: '',
      nickname: '',
      roles: []
    } // 用户信息
  }),

  actions: {
    SET_USER_INFO(info: any) {
      this.userInfo = info
    },
    LOGOUT() {
      this.userInfo = {
        id: '',
        username: '',
        nickname: '',
        roles: []
      }
      Local.clear()
    }
  }
})

export default useUserStore

具体的 userInfo 用户信息属性根据自己项目配置即可。

import { createApp } from 'vue'
import App from './App.vue'

import 'normalize.css'
import './styles/index.scss'

import router from './router'
import store from './store' // 新增
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(router)
app.use(store) // 新增
app.use(ElementPlus)

app.mount('#app')


import useUserStore from "@/store/modules/user"; // 新增

const userStore = useUserStore(); // 新增

const userLoginFunc = () =&gt; {
  loading.value = false;
   // 新增
  userStore.SET_USER_INFO({
    id: 1,
    username: "test",
    nickname: "测试账号",
    roles: ["admin", "test"],
  });
  router.push({ path: "/home" });
};

在这里插入图片描述
这里看到已经打印出我们添加的假数据了。

当我们在 home 页刷新界面时，我们重新获取用户数据，我们可以看到数据为空。这时候我们就要用到数据持久化。数据持久化是一种重要的技术，它能够确保数据在系统关闭或重启后仍然能够被保留和访问。对于 Pinia 而言，数据持久化可以帮助确保用户的数据在页面重新加载或用户会话结束后仍然保持完整性和可访问性。这样可以提升系统的稳定性，用户体验也会得到改善，因为他们不需要在每次会话中重新输入数据。

pinia-plugin-persistedstate 是适用于 Pinia 的持久化存储插件。

# 使用 yarn
yarn add pinia-plugin-persistedstate
# 使用 npm
npm install pinia-plugin-persistedstate

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const store = createPinia()
store.use(piniaPluginPersistedstate)

export default store

const useUserStore = defineStore('user', {
  state: () =&gt; ({
    // ......
  }),
  
  persist: true, // 添加 persist 属性
  
  actions: {
    // ......
  }
})

export default useUserStore

本文介绍了简单介绍了如何在项目中使用 Pinia。其优势包括支持 dev-tools、热模块更换、插件扩展、提供良好的 TypeScript 支持和服务器端渲染支持等。介绍了如何安装和配置 Pinia，以及使用 pinia-plugin-persistedstate 插件可实现数据持久化，提升系统稳定性和用户体验。上文中的配置代码可在 github 仓库中直接 copy，仓库路径：https://github.com/SmallTeddy/testing-web。