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>
相关推荐
xwlcfyb5 分钟前
零基础学好C语言系列第八讲:初识指针
c语言·开发语言
非 白7 分钟前
【Java分布式】Nacos注册中心
java·开发语言·nacos·注册中心
88号技师8 分钟前
2025年2月最新SCI-鹰鱼优化算法HawkFish Optimization Algorithm-附Matlab免费代码
开发语言·算法·matlab·优化算法
quitv29 分钟前
react脚手架配置别名
前端·javascript·react.js
化作繁星39 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
Joey_friends1 小时前
【Linux】线程详解
开发语言
_GR1 小时前
Qt开发⑧Qt的窗口_下_浮动窗口+对话框
开发语言·css·c++·qt·microsoft
Good Note1 小时前
Golang——常用库context和runtime
开发语言·爬虫·golang
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http
清河__2 小时前
【Go】十七、grpc 服务的具体功能编写
开发语言·后端·golang