详解Vue的Pinia如何做到刷新不丢数据_Vue.js

1. pinia 简介

pinia 是 vue 3 的官方推荐状态管理库，旨在替代 vuex，提供更简单、直观的状态管理解决方案。pinia 的设计理念是简单、易于学习和使用，支持组合式 api 和选项式 api。它允许跨组件或页面共享状态，避免了 vuex 中的许多复杂概念。

2. 安装 pinia

安装 pinia 非常简单，可以通过 npm 或 yarn 完成：
bash复制

npm install pinia --save

或者

yarn add pinia

3. 创建 pinia store

在 pinia 中，状态管理的核心是 store。store 可以理解为一个包含状态、getters 和 actions 的对象。以下是一个创建 store 的基本示例：
javascript复制

// stores/user.js
import { definestore } from 'pinia';

export const useuserstore = definestore('user', {
  state: () => ({
    isloggedin: false,
    user: null
  }),
  actions: {
    login(user) {
      this.isloggedin = true;
      this.user = user;
    },
    logout() {
      this.isloggedin = false;
      this.user = null;
    }
  },
  getters: {
    isuserloggedin: (state) => state.isloggedin,
    currentuser: (state) => state.user
  }
});

4. 注册 pinia

在主应用文件中注册 pinia 和 store：

5. 在组件中使用 pinia store

在 vue 组件中，可以通过 useuserstore 来访问 pinia 的 store：
vue复制

<template>
  <div>
    <p v-if="userstore.isloggedin">welcome, {{ userstore.user.name }}!</p>
    <button @click="login">login</button>
    <button @click="logout">logout</button>
  </div>
</template>

<script setup>
import { useuserstore } from '@/stores/user';
const userstore = useuserstore();

function login() {
  userstore.login({ name: 'john doe' });
}

function logout() {
  userstore.logout();
}

6. 刷新页面后数据保持的解决方案

在 web 应用中，通常需要处理页面刷新后数据丢失的问题。为了在刷新页面后保持 pinia 状态，可以使用 localstorage 或 sessionstorage 来持久化存储状态。pinia 提供了一个插件 pinia-plugin-persistedstate，可以自动将状态保存到 localstorage 或 sessionstorage 中，防止刷新页面后数据丢失。

6.1 安装插件

npm install pinia-plugin-persistedstate

6.2 配置插件

在 src/main.js 中引入并注册该插件：
javascript复制

// src/main.js
import { createapp } from 'vue';
import { createpinia } from 'pinia';
import piniapersist from 'pinia-plugin-persistedstate';
import app from './app.vue';

const app = createapp(app);
const pinia = createpinia();

pinia.use(piniapersist);
app.use(pinia);
app.mount('#app');

6.3 配置 pinia store 持久化

在你的 store 中，可以配置 persist 选项来指定哪些状态需要持久化存储：

// src/stores/user.js
import { definestore } from 'pinia';

export const useuserstore = definestore('user', {
  state: () => ({
    isloggedin: false,
    user: null
  }),
  actions: {
    login(user) {
      this.isloggedin = true;
      this.user = user;
    },
    logout() {
      this.isloggedin = false;
      this.user = null;
    }
  },
  persist: {
    enabled: true, // 启用持久化
    strategies: [
      {
        storage: localstorage, // 使用 localstorage 存储
        paths: ['isloggedin', 'user'] // 持久化这两个字段
      }
    ]
  }
});

7. 手动持久化（可选）

如果你不想使用插件，也可以手动实现页面刷新的数据保持。下面是一个简单的例子，展示了如何将状态保存到 localstorage，并在页面加载时从 localstorage 恢复状态：
javascript复制

// src/stores/user.js

import { definestore } from 'pinia';

export const useuserstore = definestore('user', {
  state: () => ({
    isloggedin: localstorage.getitem('isloggedin') === 'true', // 从 localstorage 获取值并转换
    user: json.parse(localstorage.getitem('user') || 'null') // 从 localstorage 获取值
  }),
  actions: {
    login(user) {
      this.isloggedin = true;
      this.user = user;
      localstorage.setitem('isloggedin', 'true'); // 存储到 localstorage
      localstorage.setitem('user', json.stringify(user)); // 存储到 localstorage
    },
    logout() {
      this.isloggedin = false;
      this.user = null;
      localstorage.removeitem('isloggedin'); // 删除 localstorage 中的数据
      localstorage.removeitem('user'); // 删除 localstorage 中的数据
    }
  }
});

这样，通过手动管理 localstorage，你也可以实现数据在页面刷新后保持。

8. 持久化保存的原理

持久化保存的原理是在 pinia 中数据更新时，同步保存到 localstorage 或 sessionstorage 中，刷新后从本地存储中读取数据。你可以选择自己去写，但实现起来并不像想象中那么容易，当然，也没那么难。推荐使用插件去实现持久化存储，这样更便捷，省时省力。

8.1 使用插件

使用 pinia-plugin-persistedstate 插件可以自动将状态保存到 localstorage 或 sessionstorage 中，刷新后自动读取。插件的配置非常灵活，可以指定哪些状态需要持久化，以及使用哪种存储方式。

8.2 手动实现

手动实现持久化存储需要在每个状态更新时手动调用 localstorage 或 sessionstorage 的 setitem 方法，在页面加载时调用 getitem 方法恢复状态。这种方法虽然灵活，但代码量较大，容易出错。

9. 代码示例

以下是一个完整的示例，展示了如何使用 pinia-plugin-persistedstate 插件实现 pinia 状态的持久化。

9.1 安装插件

npm install pinia-plugin-persistedstate

9.2 配置插件

在 src/main.js 中引入并注册该插件：
javascript复制

// src/main.js
import { createapp } from 'vue';
import { createpinia } from 'pinia';
import piniapersist from 'pinia-plugin-persistedstate';
import app from './app.vue';

const app = createapp(app);
const pinia = createpinia();

pinia.use(piniapersist);
app.use(pinia);
app.mount('#app');

9.3 创建 store

创建一个包含用户状态的 store，并启用持久化：

// src/stores/user.js
import { definestore } from ‘pinia';

export const useuserstore = definestore(‘user', {
state: () => ({
isloggedin: false,
user: null
}),
actions: {
login(user) {
this.isloggedin = true;
this.user = user;
},
logout() {
this.isloggedin = false;
this.user = null;
}
},
persist: {
enabled: true, // 启用持久化
strategies: [
{
storage: localstorage, // 使用 localstorage 存储
paths: [‘isloggedin', ‘user'] // 持久化这两个字段
}
]
}
});

9.4 在组件中使用 store

在 vue 组件中使用 store，并调用 login 和 logout 方法：

welcome, {{ userstore.user.name }}!

10. 总结

通过使用 pinia-plugin-persistedstate 插件，可以轻松实现 pinia 状态的持久化存储，防止页面刷新后数据丢失。手动实现持久化存储虽然灵活，但代码量较大，容易出错。在实际开发中，推荐使用插件来简化开发过程，提高开发效率。

11. 注意事项

存储限制：localstorage 和 sessionstorage 的存储容量有限，通常为 5mb 左右。如果存储的数据量过大，可能会导致存储失败。
安全性：存储在 localstorage 和 sessionstorage 中的数据是明文存储的，容易被恶意用户篡改。如果存储的数据包含敏感信息，需要进行加密处理。
兼容性：localstorage 和 sessionstorage 在所有现代浏览器中都得到了支持，但在一些旧版本的浏览器中可能不支持。如果需要支持旧版本浏览器，需要进行兼容性处理。

以上就是详解vue的pinia如何做到刷新不丢数据的详细内容，更多关于vue pinia刷新不丢数据的资料请关注代码网其它相关文章！