vue3集成pinia

vue3集成pinia

---

一、pinia是什么？

pinia相较于vuex而言，作为新一代的vue状态管理工具，由vuex核心团队成员开发，针对Vuex做了简化改进，删除了同步函数的mutations，统一使用actions去提交修改store。pinia只有store、actions、getter。模块不需要划分，每个模块都独立存在，自动拆分，体积更小，性能更好。

二、pinia使用步骤

1.安装

npm install pinia

2.在main.ts中引入使用

import { createApp } from "vue";
import { createPinia } from "pinia";
const app = createApp(App);
app.use(createPinia());
app.mount("#app");

3.初始化一个store

//    文件路径/store/userName.ts
import { defineStore } from "pinia";
/**
 * userName 表示暴露出去在其他组件中引入的名称
 * userNameId 表示在pinia中命名空间的唯一id
 * state 表示初始化仓库数据集
 * actions 表示各种修改操作方法集
 * getters 表示各种获取，也可以直接使用对象取值
 */
export const userName = defineStore("userNameId", {
  state: () => {
    return {
      name: "pinia",
      age: 18,
      gender: "男",
    };
  },
  actions: {
    setName(name: string) {
      this.name = name;
    },
    setGender(gender: string) {
      this.gender = gender;
    },
  },
  getters: {
    getName(state) {
      return state.name;
    },
  },
});

3.在其他组件引入使用

<template>
  <div class="pinia">
    <p>
      store中的初始姓名：{{userNameStore.name}}
    </p>
    <p>
      store中的初始年龄：{{userNameStore.age}}
    </p>
    <p>
      store中的初始性别：{{userNameStore.gender}}
    </p>
    <button @click="changeNameAndAge">
      修改姓名年龄
    </button>
    <button @click="changeNameGender">
      修改性别
    </button>
  </div>
</template>
<script lang='ts' setup>
import { userName } from "@/store/userName";
const userNameStore = userName();
console.log(userNameStore);
/**
 * 对象风格提交，可以修改多个值，修改姓名和年级
 * */
const changeNameAndAge = () => {
  userNameStore.$patch({ name: "修改后的姓名", age: 23 });
};

/**
 * 提交actions修改性别
 * */
const changeNameGender = () => {
  userNameStore.setGender("女");
};
</script>

---

打印userNameStore

初始化

修改后

总结

本文仅仅简单介绍了pinia的简单使用，而pinia提供了其他的Api方法和持续化存储插件，详情小伙伴们可以参考官网，或者其他前端大牛的文章，修行不易，且行且珍惜。