Pinia和piniaPluginPersistedstate

Pinia 是一个用于 Vue.js 的状态管理库，是 Vuex 的替代品。它提供了更简单的 API 和更好的 TypeScript 支持。Pinia 的设计灵感来自于 Vue 3 的 Composition API，旨在提供更直观和灵活的状态管理体验。

Pinia 的特点

• 模块化：每个 store 都是一个模块，可以独立定义和使用。

• 类型安全：提供了更好的 TypeScript 支持。

3. 轻量级：相比 Vuex，Pinia 更加轻量和简单。

4. 支持 DevTools：与 Vue DevTools 集成，方便调试。

安装 Pinia

首先，你需要在 Vue 项目中安装 Pinia：

npm install pinia

使用 Pinia

以下是一个简单的使用示例：

• 创建一个 Pinia 实例

在你的 Vue 应用中创建一个 Pinia 实例，并将其传递给 Vue 应用：

   // main.js

   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');

• 定义一个 Store

使用 defineStore 函数来定义一个 store：

   // stores/counter.js

   import { defineStore } from 'pinia';

   export const useCounterStore = defineStore('counter', {

     state: () => ({

       count: 0,

     }),

     actions: {

       increment() {

         this.count++;

       },

     },

   });

• 在组件中使用 Store

在 Vue 组件中使用定义好的 store：

   <template>

     <div>

       <p>Count: {{ count }}</p>

       <button @click="increment">Increment</button>

     </div>

   </template>

   <script>

   import { useCounterStore } from './stores/counter';

   export default {

     setup() {

       const counterStore = useCounterStore();

       return {

         count: counterStore.count,

         increment: counterStore.increment,

       };

     },

   };

   </script>

总结

Pinia 提供了一种更现代化和简化的方式来管理 Vue 应用的状态。通过模块化的设计和对 TypeScript 的良好支持，Pinia 成为 Vue 3 项目的理想选择。希望这个介绍能帮助你更好地理解和使用 Pinia！

pinia-plugin-persistedstate 是一个用于 Pinia 的插件，提供了持久化存储的功能。它允许你将 Pinia store 的状态保存在浏览器的本地存储（localStorage）或会话存储（sessionStorage）中，这样即使用户刷新页面或关闭浏览器，状态也能被保留。

主要功能

• 状态持久化：自动将 store 的状态保存到浏览器的存储中。

• 自动恢复：当应用重新加载时，自动从存储中恢复状态。

• 配置灵活：可以选择性地持久化某些 store 或者某些状态字段。

使用方法

1. 安装插件

首先，你需要安装 pinia-plugin-persistedstate：

   npm install pinia-plugin-persistedstate

2. 配置插件

在你的 Vue 应用中配置该插件：

   // main.js

   import { createApp } from 'vue';

   import { createPinia } from 'pinia';

   import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

   import App from './App.vue';

   const app = createApp(App);

   const pinia = createPinia();

   pinia.use(piniaPluginPersistedstate);

   app.use(pinia);

   app.mount('#app');

• 定义持久化的 Store

在定义 store 时，可以通过 persist 选项来配置持久化：

   // stores/counter.js

   import { defineStore } from 'pinia';

   export const useCounterStore = defineStore('counter', {

     state: () => ({

       count: 0,

     }),

     actions: {

       increment() {

         this.count++;

       },

     },

     persist: true, // 启用持久化

   });

你也可以通过对象配置来更细粒度地控制持久化行为：

   persist: {

     enabled: true,

     strategies: [

       {

         key: 'my_counter',

         storage: localStorage, // 或者 sessionStorage

         paths: ['count'], // 仅持久化 count 字段

       },

     ],

   }

总结

pinia-plugin-persistedstate 是一个非常有用的插件，特别是在需要跨页面刷新或浏览器重启时保持应用状态的场景中。通过简单的配置，你可以轻松地将应用状态持久化到浏览器的存储中。