Pinia使用

文章目录

  • Pinia 状态管理
    • 概述
    • 安装
    • 使用
      • 使用Pinia
      • Store
      • State
      • Getters
      • Actions
    • 组合式API
    • storeToRefs 解构
    • pinia-plugin-persistedstate 持久化插件
      • 安装
      • 用法
        • 添加插件
        • 开启持久化
        • 配置

Pinia 状态管理

概述

Pinia 是一个基于 Vue 3 的状态管理库,它的目标是提供更好的类型支持和更好的利用 TypeScript 特性的方式来进行状态管理。相比于 Vuex 等其他状态管理库,它使用起来更加简单、轻量级、可维护性更高。

Pinia 的主要特点包括:

  1. 类型强化:Pinia 支持 TypeScript,它可以提供更好的类型推导,使得代码更加安全、可读性更高。
  2. 模块化设计:Pinia 可以将应用程序的状态划分为多个模块,每个模块都有自己的状态、操作和 getter,这样可以提高代码的可维护性。
  3. 插件支持:Pinia 提供了许多插件来扩展其功能,例如 devtools 插件可以在开发过程中帮助调试状态变化。
  4. 开箱即用:Pinia 不需要额外的构建配置,只需安装并引入即可开始使用。
  5. 可测试性:Pinia 将逻辑与状态分离,使得测试更加容易。

总之,Pinia 是一个非常优秀的状态管理库,在 Vue 3 项目中使用 Pinia 可以提高代码的可维护性和可测试性,同时还可以获得更好的开发体验和更好的类型推导支持。

Pinia 官方文档

安装

npm install pinia

使用

使用Pinia

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

const app = createApp(App);
//支持Pinia
app.use(createPinia());
app.mount("#app");

Store

Store承载着全局状态。它有点像一个始终存在并且每个人都可以读取和写入的组件。

它有三个概念,state、getters 和 actions 并且可以安全地假设这些概念等同于组件中的“数据”、“计算”和“方法”。

src目录下新建stores文件夹,并在stores目录下新建index.js文件。

State

state 是 store 的核心部分。

类似于Vue3中的data。

定义Store

import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state: () => {
    return { name: "小明", age: 30, address: "北京", arr: [1, 2, 3] };
  }
});

使用State




Getters

Getter类似于Vue3中的计算属性。

定义Store

import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state: () => {
    return { name: "小明", age: 30, address: "北京", arr: [1, 2, 3] };
  },
  getters: {
    gettersAge: (state) => {
      console.log("state", state);
      return state.age + 10;
    },
    gettersAge2() {
      //this指向store
      return this.age + 10;
    },
    gettersNameAge: (state) => {
      return state.name + "-" + state.age;
    },
    //调用其他state,但是getter不再缓存
    gettersOther() {      
      const counterStore = useCounterStore();
      return this.age + counterStore.counter;
    },
  }
});

使用Getters




Actions

Action类似于Vue3中的methods,支持异步操作。

定义Store

import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state: () => {
    return { name: "小明", age: 30, address: "北京", arr: [1, 2, 3] };
  }, 
  actions: {
    //不能使用箭头函数
    addAge() {
      //this指向store
      this.age++;
    },
  },
});

使用Actions




组合式API

与 Vue 组合式 API 的 setup 函数 相似,我们可以传入一个函数,该函数定义了一些响应式属性和方法,并且返回一个带有我们想暴露出去的属性和方法的对象。

  • ref() 就是 state 属性
  • computed() 就是 getters
  • function() 就是 actions

定义store:

export const useCounterStore = defineStore("counter", () => {
  // state
  const counter = ref(30);
  // getters
  const gettersCounter = computed(() => {
    return counter.value + 5;
  });
  // actions
  function addCounter() {
    counter.value++;
  }
  function subCounter() {
    counter.value--;
  }
  return { counter, gettersCounter, addCounter, subCounter };
});

使用:




storeToRefs 解构

解构操作会丢失响应式,可以使用storeToRefs()函数保持响应式。




pinia-plugin-persistedstate 持久化插件

安装

npm i pinia-plugin-persistedstate

用法

添加插件
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); //添加插件
app.use(pinia);
app.mount("#app");
开启持久化
export const useCounterStore = defineStore(
  "counter",
  () => {
    // state
    const counter = ref(30);
    const num = ref(10);

    // getters
    const gettersCounter = computed(() => {
      return counter.value + 5;
    });
    // actions
    function addCounter() {
      counter.value++;
    }
    function subCounter() {
      counter.value--;
    }
    function addNum() {
      num.value++;
    }
    return { counter, num, gettersCounter, addCounter, subCounter, addNum };
  },
  {
    persist: true, //开启当前模块的持久化
  }
);
配置
  • key:storage中的key值,可以自定义。
  • storage:默认是localStorage,也可以写为sessionStorage。
  • paths:指定需要持久化的数据。
export const useCounterStore = defineStore(
  "counter",
  () => {
    // state
    const counter = ref(30);
    const num = ref(10);

    // getters
    const gettersCounter = computed(() => {
      return counter.value + 5;
    });
    // actions
    function addCounter() {
      counter.value++;
    }
    function subCounter() {
      counter.value--;
    }
    function addNum() {
      num.value++;
    }
    return { counter, num, gettersCounter, addCounter, subCounter, addNum };
  },
  {
    persist: {
      key: "hello", // 唯一标识
      paths: ["num"], //只保持num
    },
  }
);

你可能感兴趣的:(#,Vue3,前端,Pinia)