当前位置：首页 > article >正文

vue3+pinia实现状态管理和持久化存储

article 2024/11/1 6:48:19

在现代前端开发中，状态管理是一个至关重要的环节。Vue.js 作为一款流行的前端框架，其生态系统提供了多种状态管理解决方案。pinia 是 Vue.js 3 的官方推荐状态管理库，它提供了简洁的 API 和强大的功能，使得状态管理变得更加容易。本文将介绍如何使用 pinia (状态管理) 以及 pinia-plugin-persistedstate （持久化存储） 插件来实现 Vue.js 应用的状态管理，并解决页面刷新时状态丢失的问题。

1. 安装方式:

#两种安装方式 npm or yarn
npm install pinia pinia-plugin-persistedstate  
# 或者  
yarn add pinia pinia-plugin-persistedstate

2. 创建 pinia实例并配置并配置pinia-plugin-persistedstate 插件

在你的 Vue.js 项目中，你需要创建一个 pinia 实例，并配置 pinia-plugin-persistedstate插件。这里我们在 stores/counter.js 文件中完成这一步骤（实际项目中建议分开处理）。

// stores/counter.js  
import { createPinia, defineStore } from 'pinia';  
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';  
  
// 创建一个 Pinia 实例  
const pinia = createPinia();  
  
// 使用 pinia-plugin-persistedstate 插件  
pinia.use(piniaPluginPersistedstate);  
  
// 定义一个状态存储  
export const useStore = defineStore('main', {  
  state: () => ({  
    themeColors: 'Light' // 初始状态  
  }),  
  // 启用持久化存储  
  persist: true,  
  getters: {  
    // 可以在这里定义 getter 方法，用于计算或派生状态  
  },  
  actions: {  
    // 可以在这里定义 action 方法，用于修改状态  
  }  
});  
  
// 导出 Pinia 实例  
export default pinia;

3. Vue 应用中挂载 Pinia

接下来，你需要在 Vue 应用中使用Pinia 实例需要在(main.js 或 main.ts)中引入和挂载

// main.js 或 main.ts  
import { createApp } from 'vue';  
import App from './App.vue';  
import pinia from './stores/counter'; // 导入 Pinia 实例 
const app = createApp(App);  
// 使用 Pinia 实例  
app.use(pinia);  
app.mount('#app');

组件中使用

现在，你可以在你的 Vue 组件中使用 useStore 来访问和修改状态了。

<template>  
  <div>  
    <p>当前主题颜色: {{ themeColor }}</p>  
    <button @click="toggleTheme">切换主题颜色</button>  
  </div>  
</template>  
  
<script>  
import { useStore } from './stores/counter';  
  
export default {  
  setup() {  
    const store = useStore();  
  
    // 访问状态  
    const themeColor = store.themeColors;  
  
    // 修改状态的方法  
    const toggleTheme = () => {  
      store.themeColors = store.themeColors === 'Light' ? 'Dark' : 'Light';  
    };  
  
    return {  
      themeColor,  
      toggleTheme  
    };  
  }  
};  
</script>