Pinia的基本用法

Pinia的安装和引入

1.安装Pinia

bash 复制代码
npm install pinia

2. 在vue项目的main.js文件中引入pinia

bash 复制代码
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

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

Pinia的基本使用

使用pinia实现计数器

1.在src目录下创建stores目录,并新建文件counter.js

2. 在counter.js文件中使用defineStore定义对象useCounterStore

javascript 复制代码
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCounterStore = defineStore('counter', () => {
    // 定义数据(state)
    const count = ref(0)

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

    // 以对象的方式return供组件使用
    return {
        count,
        increment
    }
})

3.在App.vue文件中导入counter.js文件中的useCounterStore

javascript 复制代码
<script setup>
// 1. 导入use打头的方法
import { useCounterStore } from '@/stores/counter'
// 2. 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)
</script>

<template>
  <button @click="counterStore.increment"> {{ counterStore.count}} </button>
</template>

<style scoped>

</style>

getters和异步action

在counter.js文件中进行如下定义

javascript 复制代码
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import axios from 'axios'

const API_URL = "http://geek.itheima.net/v1_0/channels"
export const useCounterStore = defineStore('counter', () => {
    // 定义数据(state)
    const count = ref(0)

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

    // getter定义
    const doubleCount = computed(() => count.value * 2)

    // 定义异步action
    const list = ref([])
    const getList = async () => {
        const res = await axios.get(API_URL)
        list.value = res.data.data.channels
    }
    // 以对象的方式return供组件使用
    return {
        count,
        doubleCount,
        increment,
        list,
        getList
    }
})

在App.vue中使用

javascript 复制代码
<script setup>
// 1. 导入use打头的方法
import { useCounterStore } from '@/stores/counter'
import { onMounted } from 'vue';
// 2. 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)
onMounted(()=>{ // 挂载期发起请求
  counterStore.getList()
})
</script>

<template>
  <button @click="counterStore.increment"> {{ counterStore.count}} </button>
    {{ counterStore.doubleCount }}
  


  <ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<style scoped>

</style>

使用storeToRefs进行结构赋值,保持响应式更新

javascript 复制代码
<script setup>
// 1. 导入use打头的方法
import { useCounterStore } from '@/stores/counter'
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia'
// 2. 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)

// 直接结构赋值(响应式丢失)
// const { count, doubleCount} = counterStore
// console.log(count, doubleCount)

// 方法包裹(保持响应式更新)
const { count, doubleCount } = storeToRefs(counterStore)
console.log(count, doubleCount)

// 方法直接从原来的counterStore解构赋值
const { increment } = counterStore

// 触发action
onMounted(()=>{ 
  counterStore.getList()
})
</script>

<template>
  <button @click="increment"> {{ count }} </button>
    {{ doubleCount }}
  


  <ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<style scoped>

</style>
相关推荐
IT猿手2 分钟前
2025高维多目标优化:基于导航变量的多目标粒子群优化算法(NMOPSO)的无人机三维路径规划,MATLAB代码
开发语言·人工智能·算法·机器学习·matlab·无人机·cocos2d
呱牛do it6 分钟前
Python Matplotlib图形美化指南
开发语言·python·matplotlib
pianmian19 分钟前
python制图之小提琴图
开发语言·python·信息可视化
水瓶丫头站住9 分钟前
Qt中QRadioButton的使用
开发语言·qt
非 白16 分钟前
【Java】代理模式
java·开发语言·代理模式
知识分享小能手22 分钟前
Html5学习教程,从入门到精通,HTML5 简介语法知识点及案例代码(1)
开发语言·前端·javascript·学习·前端框架·html·html5
IT、木易25 分钟前
大白话React第二章深入理解阶段
前端·javascript·react.js
muxue17825 分钟前
go:运行第一个go语言程序
开发语言·后端·golang
米饭好好吃.26 分钟前
【Go】Go wire 依赖注入
开发语言·后端·golang
闲猫26 分钟前
go 接口interface func (m Market) getName() string {
开发语言·后端·golang