Pinia基础

Pinia

• 概念：一个跨组件/页面共享状态的Vue存储库（Vuex5版本）

• 优点：

  • Vue2 和 Vue3 都支持
  • Pinia 中只有 state、getter、action
  • 良好的 TypeScript 支持
  • Pinia 中每个 store 都是独立的，互相不影响
  • 体积非常小，只有 1kb 左右
  • Pinia支持插件来扩展自身功能
  • 支持服务端渲染

1、安装：yarn add pinia

2、将pinia挂载到Vue应用中（全局jS/ts中）

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
const pinia = createPinia();

const app = createApp(App);
app.use(pinia);
app.mount("#app");

3、创建store

ps：使用 pinia 提供的 defineStore() 方法来创建一个 store ，该 store 用来存放我们需要全局使用的数据。

import { defineStore } from 'pinia'

// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('store的名字', {
   // 其它配置项
})

4、使用store

ps：直接引入我们声明的useUsersStore 方法即可

<script setup lang="ts">
import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
console.log(store);
</script>

5、添加state

defineStore 函数创建了一个store，该函数第二个参数是一个options配置项，我们需要存放的数据就放在options对象中的state属性内。

state接收的是一个箭头函数返回的值，它不能直接接收一个对象

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "小猪课堂",
      age: 25,
      sex: "男",
    };
  },
})

6、操作 state

6.1、读取state（其他组件使用写法一样）

import { useUsersStore } from "../src/store/user";
// 使用pinia的storeToRefs函数，将state中的数据变为响应式
import { storeToRefs } from 'pinia'; 
const store = useUsersStore();
// 读取state
const { name, age, sex } = storeToRefs(store);

6.2、修改state的数据

ps：使用pinia的 storeToRefs 函数，将state中的数据变为响应式

<template>
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <p>性别：{{ sex }}</p>
  <button @click="changeName">更改姓名</button>
</template>
<script setup lang="ts">
import { useUsersStore } from "../src/store/user";
import { storeToRefs } from 'pinia'; 
const store = useUsersStore();
const { name, age, sex } = storeToRefs(store);
// 更改姓名
const changeName = () => {
  store.name = "张三";
  console.log(store);
};
</script>

6.3、重置state

ps：调用store的 $reset() 方法

<button @click="reset">重置store</button>
// 重置store
const reset = () => {
  store.$reset();
};

6.4、批量更改state数据

ps：调用store的 $patch 方法

<button @click="patchStore">批量修改数据</button>
// 批量修改数据
const patchStore = () => {
  store.$patch({
    name: "张三",
    age: 100,
    sex: "女",
  });
};

6.5、直接替换整个state

ps：使用store的 $state 方法

store.$state = { counter: 666, name: '张三' }

7、getters

概念：getters 是 defineStore参数配置项里面的另一个属性，和Vue中的计算属性类似。

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "小猪课堂",
      age: 25,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
  },
});

7.1、getter传参

getters: {
    getAddAge: (state) => {
      return (num) => state.age + num;
    },
  },

调用：<p>新年龄：{{ store.getAddAge(1100) }}</p>

8、actions

ps：actions属性值同样是一个对象，该对象里面也是存储的各种各样的方法，包括同步方法和异步方法，主要处理业务逻辑。

8.1、添加action

 actions: {
    saveName(name: string) {
      this.name = name;
    },
  },

8.2、调用action

const saveName = () => {
  store.saveName("我是小猪");
};

9、Pinia分模块

在pinia中一个ji / ts文件就是一个模块。

10、Pinia持久化存储

下载插件

npm i pinia-plugin-persist --save

全局配置

// main.ts
import { createPinia } from 'pinia'
// pinia持久化存储插件
import piniaPluginPersist from 'pinia-plugin-persist'
import App from './App.vue'
const pinia = createPinia();
// 将持久化存储挂载到pinia
pinia.use(piniaPluginPersist)
createApp(App).use(pinia).mount('#app')

使用

import { defineStore } from "pinia";

export const useStore = defineStore('storeId', {
  state() {
    return {
      num: 0,
      name: '张三',
      age: 20
    }
  },
  getters: { },
  actions: { },
  persist: {
    // 开启持久化存储，默认是sessionStorage
    enabled: true,
    strategies: [{
      // 持久化存储的key值
      key: 'myStore',
      // 配置为localStorage
      storage: localStorage,
      // 局部持久化，将需要持久化的数据加入到数组
      paths:['name']
    }]
  }
})

11、Pinia总结 - 三大点

• state - 存储数据
• getters - 处理数据
• actions - 处理业务逻辑，同步异步都支持