Pinia状态管理工具（快速实现）

一、以下是对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比较好，抗压性比较强，状态丰富。

Pinia状态管理工具（快速实现）

猜你喜欢