Pinia 使用方法，配合localStorage实现存储用户信息

Pinia 是 Vue.js 3 的一个状态管理库，它的使用方法简单，并且允许以模块化的方式来管理不同的状态。在这篇文章中，我们将探讨如何使用 Pinia 和 localStorage 来存储用户信息，实现数据的持久化。

1. 安装 Pinia

首先，确保你已安装 Pinia。可以通过 npm 或者 yarn 安装：

npm install pinia

或者

yarn add pinia

2. 创建 Pinia Store

在项目的 src 目录下，创建一个新的文件夹 stores，然后在其中创建一个文件 userStore.js，用于管理用户信息的状态。

// src/stores/userStore.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: JSON.parse(localStorage.getItem('userInfo')) || {}
  }),
  actions: {
    setUserInfo(data) {
      this.userInfo = data;
      localStorage.setItem('userInfo', JSON.stringify(data));
    },
    clearUserInfo() {
      this.userInfo = {};
      localStorage.removeItem('userInfo');
    }
  }
});

在上面的代码中，我们定义了一个 userStore。它的状态包括 userInfo，初始值通过从 localStorage 获取，如果 localStorage 中没有值，则默认为空对象。

我们还定义了两个动作：

• setUserInfo(data): 设置用户信息，并将其存储到 localStorage。
• clearUserInfo(): 清除用户信息并同时移除 localStorage 中的数据。

3. 在组件中使用 Store

现在，我们可以在 Vue 组件中使用这个状态管理。以下是一个示例组件 UserComponent.vue，用来展示和更新用户信息。

<template>
  <div>
    <h1>用户信息</h1>
    <div v-if="userInfo.name">
      <p>姓名: {{ userInfo.name }}</p>
      <p>邮箱: {{ userInfo.email }}</p>
      <button @click="clearUser">清除信息</button>
    </div>
    <div v-else>
      <input v-model="name" placeholder="输入姓名" />
      <input v-model="email" type="email" placeholder="输入邮箱" />
      <button @click="saveUser">保存信息</button>
    </div>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/userStore';
import { ref } from 'vue';

export default {
  setup() {
    const userStore = useUserStore();
    const name = ref('');
    const email = ref('');

    const saveUser = () => {
      userStore.setUserInfo({ name: name.value, email: email.value });
      name.value = '';
      email.value = '';
    };

    const clearUser = () => {
      userStore.clearUserInfo();
    };

    return {
      userInfo: userStore.userInfo,
      name,
      email,
      saveUser,
      clearUser,
    };
  },
};
</script>

<style scoped>
/* 你的样式代码 */
</style>

4. 整合到应用中

接下来，在你的主应用文件中（如 main.js），你需要引入 Pinia，并将其添加到 Vue 应用中：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

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

5. 结语

到目前为止，我们已经创建了一个简单的用户信息存储，通过 Pinia 管理状态，并使用 localStorage 实现数据的持久化。这种方法可以确保即使用户刷新页面或关闭浏览器，用户信息仍然保存下来。使用 Pinia 让状态管理变得更加简洁和直观，这也是 Vue 3 的强大之处。希望这篇文章能帮助你更好地理解和使用 Pinia！