Pinia的使用

Pinia 是最近流行的状态管理库，可以替代 Vuex。

安装

bash

npm install pinia

项目中引入 Pinia

在项目入口文件中引入 Pinia。

main.ts

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

const app = createApp(App);

// 创建 Pinia 实例
const pinia = createPinia();

// 挂载 Pinia
app.use(pinia);
app.mount("#app");

创建 Store

下一步就是创建 Store。

一般是在 stores 目录下创建 Store。

stores/counter.js

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  // 状态
  state: () => ({
    count: 0,
  }),
  // 计算属性，用于派生状态
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  // 用于同步或者异步修改状态
  actions: {
    increment() {
      this.count++;
    },
  },
});

在组件中使用 Store

创建好了 Store 就可以在组件中使用 Store 了。

componentA.vue

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from "vue";
  import { useCounterStore } from "../stores/counter";

  const counter = useCounterStore();
</script>

持久化

可以使用 Pinia 插件将状态持久化到 localStorage。

1. 安装插件

bash

npm install pinia-plugin-persistedstate

2. 在入口文件中引入插件

main.ts

import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

3. 启用持久化

stores/counter.js

export const useCounterStore = defineStore("counter", {
  state: () => ({
    count: 0,
  }),
  persist: true, // 启用持久化
});