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>