Pinia小菠萝(状态管理器)

Pinia 是一个专为 Vue 3 设计的状态管理库,它借鉴了 Vuex 的一些概念,但更加轻量灵活。下面将详细介绍如何使用 Pinia 状态管理库:

安装 Pinia

  • 使用 npm :在项目目录下运行npm install pinia
  • 使用 yarn :在项目目录下运行yarn ``add pinia

创建 Pinia 实例

  • 在入口文件中引入并创建实例 :在项目的入口文件(通常是main.jsmain.ts)中,导入并创建一个 Pinia 实例,然后将其挂载到应用程序上。
javascript 复制代码
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

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

//2.执行方法得到实例
const pinia = createPinia()

//3.把pinia实例加入到app应用中

createApp(App).use(pinia).mount('#app')

2.自定义一个组件,该类编写在components/stores/counter.js

javascript 复制代码
// 导入一个方法 defineStore

import {defineStore} from 'pinia'
import { ref } from 'vue'

export const useCounterStore = defineStore('counter',()=>{
    const count = ref(0)

    //定义修改数据的方法(active 同步 + 异步)
    const increate = () =>{
        count.value++;
    }

    //将对象的方法使用return供组件使用
    return {
        count,
        increate
    }

})

在App.vue中使用该组件

html 复制代码
<script setup>
//1.导入 use 打头的方法
import { useCounterStore } from './stores/counter';

//2.执行方法得到store实例对象
const counterStore = useCounterStore();
</script>

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <button @click="counterStore.increate()">Increment</button>
  </div>
</template>

<style scoped>

</style>

测试 结果:

getter方法的定义

javascript 复制代码
    //getter的定义
    const doubeleCount = computed(() =>
        count.value * 2
    )

    //将对象的方法使用return供组件使用
    return {
        count,
        increate,
        doubeleCount
    }
javascript 复制代码
<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>DoubleCount:{{ counterStore.doubeleCount }}</p>
  </div>
</template>

效果:

异步action

首先安装依赖 npm install axios

其次,在组件中导出调用异步的方法getList

javascript 复制代码
// 导入一个方法 defineStore
import {defineStore} from 'pinia'
import { ref,computed } from 'vue'
import axios from 'axios'

const API_URL = 'https://jsonplaceholder.typicode.com/todos'

export const useCounterStore = defineStore('counter',()=>{
    //定义异步action
    const list = ref([])
    const getlist = async () =>{
        const res = await axios.get(API_URL)
        list.value = res.data
        console.log(list.value);
    }
    //将对象的方法使用return供组件使用
    return {
        getlist,
        list
    }
})

在组件中,引入并且调用方法即可

html 复制代码
<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>DoubleCount:{{ counterStore.doubeleCount }}</p>
    <button @click="counterStore.increate()">Increment</button>
    <button @click="counterStore.getlist()">getListData</button>
    <hr>
    <ol v-for="item in counterStore.list" :key="item.id">
      <li >{{ item.title }}</li>
      <li >{{ item.completed }}</li>
      <li >{{ item.userId }}</li>
    </ol>
  </div>
</template>

效果:

初始界面:

点击getListData按钮后:

storeToRefs解构赋值

首先,引入相关依赖 storeToRefs,然后将响应式对象进行解构赋值

( 方法不需要使用storeToRefs解构赋值 切记!!!)

javascript 复制代码
//针对响应式对象的解构赋值
const { count, doubeleCount, list } = storeToRefs(counterStore);
//对于方法的解构赋值(不需要使用storeToRefs)
const { increate,getlist } = counterStore;

此外,方法解构赋值,在调用方法时,括号加不加都行

相关推荐
赵钰老师1 天前
【SWAT模型应用】AI辅助下基于ArcGIS Pro的SWAT模型全流程高效建模实践与深度进阶应用
人工智能·arcgis·chatgpt·数据分析
白水先森3 天前
ArcGIS Pro中创建最低成本路径的详尽教程
经验分享·arcgis·arcgispro
小仙有礼了3 天前
ArcGis for js 4.x实现测量,测距,高程的功能
javascript·算法·arcgis
白水先森3 天前
ArcGIS Pro中打造精美高程渲染图的全面指南
经验分享·arcgis·信息可视化·arcgispro
GIS瞧葩菜3 天前
ArcGis和Super Map
arcgis·supermap
白水先森4 天前
ArcGIS Pro在洪水淹没分析中的应用与实践
经验分享·arcgis
白水先森4 天前
ArcGIS Pro热力图制作指南:从基础到进阶
经验分享·arcgis·信息可视化
白水先森5 天前
如何使用ArcGIS Pro高效查找小区最近的地铁站
经验分享·arcgis·信息可视化·数据分析
白水先森5 天前
ArcGIS Pro制作人口三维地图教程
arcgis·信息可视化·数据分析
摆烂老大6 天前
SWAT| 水文 | SWAT模型(四):气象数据库制备(附Python代码)
python·arcgis·水文·swat模型