一、以下是对pinia的理解(如果已有了解直接跳过看实现代码)
Pinia是vue生态里Vuex的替代者,一个全新的vue状态管理库。在Vue3成为正式版以后,尤雨溪强势推荐的项目就是Pinia。
那先来看看Pinia比Vuex好的地方,也就是Pinia的五大优势。
可以对Vue2和Vue3做到很好的支持,也就是老项目也可以使用Pinia。
抛弃了Mutations的操作,只有state、getters和actions.极大的简化了状态管理库的使用,让代码编写更加容易直观。
不需要嵌套模块,符合Vue3的Composition api ,让代码更加扁平化。
完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持,所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的化,一定知道Vuex对TS的语法支持不是完整的(经常被吐槽)。
代码更加简洁,可以实现很好的代码自动分割。Vue2的时代,写代码需要来回翻滚屏幕屏幕找变量,非常的麻烦,Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割,pinia也同样继承了这个优点。
如果你说这五点有点太多了,记不住。可以简单总结Pinia的优势就是,更加简洁的语法,完美支持Vue3的Composition api 和 对TypesCcript的完美支持。这些优势和尤雨溪的强烈推荐。个人觉得很快Pinia就会完全取代Vuex,成为最适合Vue3的状态管理库。
1.首先,确保已经在项目中安装了 Pinia:
npm install pinia
2.然后,创建一个名为 store.js
的文件,用于定义和导出 Pinia Store 实例:
import { createPinia } from 'pinia';
const store = createPinia();
export default store;
3.接下来,在需要使用状态的组件中引入 Pinia 并使用创建的 Store 实例:
<template>
<div>
<h1>Count: {
{ count }}</h1>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import { useStore } from 'pinia'; // 导入 useStore
export default defineComponent({
setup() {
const store = useStore(); // 使用 useStore 获取 Store 实例
const increment = () => {
store.count++; // 更新状态:自增 count
};
const decrement = () => {
store.count--; // 更新状态:自减 count
};
return {
count: store.count, // 访问状态:获取当前的 count 值
increment,
decrement,
};
},
});
</script>
4.最后,在根组件中安装 Pinia,并把 Store 实例提供给应用程序:
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
const app = createApp(App);
app.use(store); // 安装 Pinia 并提供 Store 实例
app.mount('#app');
5.总结:
这样就完成了一个简单的 Pinia 状态管理示例。在该示例中,通过定义 Store 实例并在组件中使用 useStore
函数获取该实例,可以在组件中访问和更新状态。
需要注意的是,在实际项目中,可以根据需求创建不同的 Store 实例,并拆分为多个模块来管理不同的状态。Pinia 还提供了其他更多功能,例如 Actions、Getters 和插件等,可以根据项目需要进行进一步探索和使用。
注意!:vuex和pinia区别,pinia是一个轻量级的状态管理仓库,抛弃了mutions操作,更加轻便
pinia适合与小型项目,或者复杂度较低的相符,或者数据状态不混乱,不复杂,那么使用pinia没问题
如果是大型项目,或者复杂度较高,逻辑以及数据状态都比较复杂,还是使用vuex比较好,抗压性比较强,状态丰富。