Pinia笔记

2024-11-21

字数统计: 601字 | 阅读时长≈ 3分

Pinia 笔记

安装Pinia并注册

1	npm i pinia

在main.js中：

import { createPinia } from 'pinia'

const app = createApp(App)

// 以插件的形式注册
app.use(createPinia())
app.use(router)
app.mount('#app')

实现counter

核心步骤：

定义store
组件使用store

1- 定义store

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

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

  // 修改数据的方法 （action）
  const increment = ()=>{
    count.value++
  }

  // 以对象形式返回
  return {
    count,
    increment
  }
})

2- 组件使用store

<script setup>
  // 1. 导入use方法
	import { useCounterStore } from '@/stores/counter'
  // 2. 执行方法得到store store里有数据和方法
  const counterStore = useCounterStore()
</script>

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

实现getters

getters直接使用计算属性即可实现

// 数据（state）
const count = ref(0)
// getter (computed)
const doubleCount = computed(() => count.value * 2)

异步action

思想：action函数既支持同步也支持异步，和在组件中发送网络请求写法保持一致步骤：

store中定义action
组件中触发action

1- store中定义action

const API_URL = 'http://geek.itheima.net/v1_0/channels'

export const useCounterStore = defineStore('counter', ()=>{
  // 数据
  const list = ref([])
  // 异步action
  const loadList = async ()=>{
    const res = await axios.get(API_URL)
    list.value = res.data.data.channels
  }
  
  return {
    list,
    loadList
  }
})

2- 组件中调用action

<script setup>
	import { useCounterStore } from '@/stores/counter'
  const counterStore = useCounterStore()
  // 调用异步action
  counterStore.loadList()
</script>

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

storeToRefs

保持响应式解构

直接基于store进行解构赋值，响应式数据（state和getter）会丢失响应式特性，

<script setup>
  import { storeToRefs } from 'pinia'
	import { useCounterStore } from '@/stores/counter'
  const counterStore = useCounterStore()
  
  //丢失响应式
  const { count, increment } = conterStore
  
</script>

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

使用storeToRefs辅助保持响应式

<script setup>
  import { storeToRefs } from 'pinia'
	import { useCounterStore } from '@/stores/counter'
  const counterStore = useCounterStore()
  // 使用它storeToRefs包裹之后解构保持响应式
  const { count } = storeToRefs(counterStore)

  //方法不需要用storeToRefs结构，直接从原来的取就行
  const { increment } = counterStore
  
</script>

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

本文作者： NICK
本文链接： https://nicccce.github.io/TechNotes/Pinia-Note/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！