Pinia笔记

什么是Pinia?

vue的状态管理。

Pinia特点

• ts支持
• 轻量级 1kb+
• 没有mutations。
• actions 支持同步和异步
• 没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；
• 无需手动添加 store，store 一旦创建便会自动添加；

引用自新一代状态管理工具，Pinia.js 上手指南 - 掘金

开发支持

• 时间旅行
• 追踪actions
• dev工具支持

 

热模块更新

• 在不重新加载页面的情况下修改存储
• 在开发过程中保持现有状态

引入

import { createPinia } from 'pinia'

app.use(createPinia())

定义Store

Define

import { defineStore } from "pinia";
export const useTestStore = defineStore("test", {
  // options...
});

Using

<script setup>
import { useTestStore } from "@/store/test.js";
const store = useTestStore();
</script>

Tip

store是一个用reactive包装