• Vue 全局状态管理工具 pinia


    全局状态管理工具 pinia

    • 本文的使用时针对于 Vue3 来展开的

    • 当然了项目是是基于 vite 创建的

    • 其他请跳转,pinia 的官方文档

    • 其实有 vuex 的基础 pinia 使用起来会非常简单

    一、下载 pinia

    npm install pinia

    二、引入 pinia

    • 在 main.js 中引入
      import { createPinia } from 'pinia'
    • 在该 vue 实例中使用
      app.use(createPinia())

    三、创建一个简单的 store

    • 和 vuex 一样先创建一个 store 文件夹

    • store 是通过 defineStore() 定义的。使用的话先引入
      import { defineStore } from 'pinia'

    • 创建一个全局的变量

      // src/stores/counterStore
      import { defineStore } from "pinia";
      // defineStore 函数返回值本质是一个Hooks
      export const useCounterStore = defineStore("counter", {
        // 数据管理
        state: () => ({
          count: 0,
        }),
      
        //方法
        actions: {
          increment() {
            this.count++;
          },
        },
      
        // 计算属性
        getters: {
          doubleCount() {
            return this.count * 2;
          },
        },
      });
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23

    四、在页面中使用 store

    • 在页面中引入 store
      import { useCounterStore } from "@/stores/counterStore"

    • 使用 该 store
      const counterStore = useCounterStore()

      • 这是要是用 store 中的内容直接结构就可以,但是直接结构的话他不是响应式的
        const { count, doubleCount } = counterStore
      • 这是就要用到一个方法 storeToRefs() 使得从 Store 中提取属性同时保持其响应式
        const { count, doubleCount } = storeToRefs(counterStore)
    • 实例中使用

      <template>
        <div>
          {{ count }} {{ doubleCount }}
          <button @click="couterStore.increment">+</button>
        </div>
      </template>
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      <script setup>
        import {storeToRefs} from 'pinia' import {useCounterStore} from
        '@/stores/counterStore' const couterStore = useCounterStore() const{" "}
        {(count, doubleCount)} = storeToRefs(couterStore)
      </script>
      
      • 1
      • 2
      • 3
      • 4
      • 5

    五、pinia 的模块化

    • pinia 的模块是就是创建多个独立的 store 实例
    • 相互访问的方法和在页面中使用的方法也是一样的

    六、pinia 的异步操作

    • pinia 的异步操作和 vuex 不一样,没有单独拆分一个方法出来处理
    • pinia 的异步方法处理还是在 actions 里面,使用 async 和 await,配合 try 和 catch
    // 模拟一个异步方法 catchDataApi()
      actions: {
        async loadData() {
          try {
            const data = await catchDataApi()
            this.products = data
          } catch (error) {
    
          }
        }
      }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • 相关阅读:
    政务窗口服务满意度调查如何开展
    [机器学习]-1 概要介绍
    薪资6-8K,却收到了85份简历,今年求职这么卷?
    如何使用 Redis 缓存
    Linux上如何安装tomcat服务器?如何在Linux上安装Linux服务器?
    9.18 Day55---用户和权限
    基于深度学习的组织病理学图像IDC检测方法
    Android 混淆使用及其字典混淆(Proguard)
    模型机微程序控制器
    信息学奥赛一本通 1915:【01NOIP普及组】最大公约数与最小公倍数 | 洛谷 P1029 [NOIP2001 普及组] 最大公约数和最小公倍数问题
  • 原文地址:https://blog.csdn.net/weixin_46087056/article/details/125417491