如何快速上手Pinia！

Pinia！

废话不多说我们直接从5点快速上手pinia，从引入到使用最后到导出

1.Pinia的引入

javascript 复制代码

import {createPinia} from 'pinia'
//1.导入createPinia

//2.创建实例
const pinia = createPinia;
//3.pinia挂载到app上
app.use(pinia);

2.Pinia的计数器案例

使用方法：

创建一个store
然后在组件中使用store

javascript 复制代码

//1.创建一个store
export const UseConterStore = defineStore('conter',()=>{
  const count = ref(0)；
  function increment(){
      count.value++;
  }
    return {count,increment};
})

3.getters实现

在 Pinia 中，getters是用于从存储（store）中派生计算属性的函数，类似于 Vue 组件中的计算属性。它具有以下作用和特点：

计算派生数据
- 作用：getters允许你基于存储中的状态（state）进行计算，生成新的衍生数据。例如，你有一个存储数组的状态，通过getters可以计算出数组的长度、过滤出符合特定条件的元素等。
- 示例：假设你有一个store用于管理商品列表，其中包含商品价格的数组。你可以定义一个getters来计算商品的总价。

javascript 复制代码

import { defineStore } from 'pinia' const useProductStore = defineStore('product', 
{ state: () => ({ 
products: [ { id: 1, price: 10 }, 
{ id: 2, price: 20 }, 
{ id: 3, price: 30 } ] }), 
getters: { totalPrice: (state) => state.products.reduce((total, product) => 
total + product.price, 0) } })

缓存计算结果
- 作用：getters会缓存计算结果，只有在其依赖的状态发生变化时才会重新计算。这可以提高性能，避免在多次访问时重复执行相同的计算。
- 示例：在上述计算商品总价的例子中，如果products数组没有发生变化，多次访问totalPrice时，getters不会重新执行计算，而是直接返回缓存的结果。
实现数据的复用
- 作用：getters使得在多个组件中需要使用相同的计算逻辑时，可以将该计算逻辑封装在getters中，实现代码的复用。
- 示例：多个不同的组件都需要展示商品的总价，那么都可以通过访问productStore中的totalPrice这个getters来获取计算后的总价，而不需要在每个组件中重复编写计算总价的代码。
对数据进行包装和转换
- 作用：可以将存储中的原始数据转换为更适合在组件中展示或使用的格式。比如，将日期格式进行转换，将枚举值转换为对应的文本描述等。
- 示例：假设存储中有一个日期格式的状态createTime，你可以定义一个getters将其转换为更友好的日期格式。

javascript 复制代码

import { defineStore } from 'pinia' 
const useOrderStore = defineStore('order', { state: () => ({ createTime: '2023-01-01T12:00:00' }), 
getters: { formattedCreateTime: (state) => 
{ const date = new Date(state.createTime) 
return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }) } } })

ini 复制代码

export const useCreateCounter = defineStore('counter',()=>{
    const count = ref(0);
    const doublecount = computer(()=>{
        count.value++;
    })
    returen {count,doublecount};
})

4.action实现异步

治理我们可以使用async和await的异步方法来进行异步处理，使用Promise也是同理

ini 复制代码

export const useCreateCounter = defineStore('counter',()=>{
    const count = ref(0);
    const doublecount = computer(()=>{
        count.value++;
    })
    const list = ref([]);
    const getList = async()=>{
        const res = await axios.get(URL);
        res.value = res.data.data.channels;
    }
})

5.storeToRefs

使用这个进行包裹可以保证数据的响应式的结构

arduino 复制代码

const {getList,doubleCount,increment} = storeToRefs(useCreateCounter)
//这里的increment不能这样子解构赋值
//上面这种方法只能做结构赋值的作用
//如果要操作函数的这种方法还是使用原来的解构赋值即可
const {increment} = useCreateCounter

参考：Pinia官方文档