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

vue3中pinia状态管理库使用以及持久化配置方法总结

article 2024/11/22 3:04:52

在 Vue 3 中，Pinia 是一个状态管理库，旨在替代 Vuex，提供更简单和更直观的 API。Pinia 支持 TypeScript，且其设计更符合 Vue 3 的组合式 API。

安装 Pinia

首先，你需要安装 Pinia和pinia-plugin-persistedstate。可以使用 npm 或 yarn：

npm install pinia
# 或者
yarn add pinia


npm install pinia-plugin-persistedstate
或
yarn add pinia-plugin-persistedstate

在 Vue 3 中使用 Pinia

创建 Pinia 实例

在你的主入口文件（通常是 main.js 或 main.ts）中，创建 Pinia 实例并将其添加到 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');

2.创建 Store并持有化

你可以在 src/stores 目录下创建一个 store 文件，例如 counterStore.js：

// stores/counter.js
import { defineStore } from 'pinia';
import { ref,watch} from 'vue';

export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
    // 监听 count 的变化，方便调试
    watch(count, (newValue) => {
        console.log('Count changed:', newValue);
    });

    function increment() {
        count.value++;
    }

    function decrement() {
        count.value--;
    }

    return {
        count,
        increment,
        decrement,
    };
}, {
    persist: true, // 启用持久化
});

2. APP.vue在组件中使用 Store

在组件中，你可以直接调用这些方法：

<script setup lang="ts">
import { useCounterStore } from "./stores/counterStore";
const counterStore = useCounterStore();
</script>

<template>
  <b>{{ counterStore.count }}</b>
  <br />
  <br />
  <br />
  <br />
  <div>
    <button @click="counterStore.increment">加</button>
  </div>
  <br />
  <br />
  <br />
  <br />
    <div>
    <button @click="counterStore.decrement">减</button>
  </div>
</template>

<style scoped>
b {
  font-size: 50px;
}
</style>

注意：store中定义的响应式数据，只有数值变化后，才会持久话到本地，即（const count = ref(0);）不会直接持久化，需要改变这个对象的值之后，才会持久化到本地。

以上这样配置，默认会保存到浏览器的本地存储。

查看全文

http://www.kler.cn/a/403754.html