To learn vue3, you will learn from the basics. Understand how to use setup function, ref, recative, watch, computed, pinia, etc.
Today we talk about vue3 combined api, pinia
Click here to jump to pinia Chinese document
The basic example on the official website provides three writing methods
1. Selective api, similar to vuex writing
2. Combined api, vue3 combined api writing
3. With the help of auxiliary functions mapStores(), mapState() or mapActions()
This article mainly talks about the second way of writing, which is consistent with the grammatical style of vue3
Use:
1. Define store(state+action+getters)
//defineStore function to create a store instance object
//defineStore function needs to pass two parameters, the first parameter: small warehouse name (unique id, not repeatable,
used to distinguish between Which store, so that there will be no naming conflicts. The warehouse data used in the component is the function returned by the defineStore method through the definition variable (useCounterStore), which has no direct relationship with the warehouse name (counter)) //The second parameter: small warehouse
configuration Object
//defineStore method execution will return a function, the function of the function is to allow the component to obtain the warehouse data
import {
defineStore} from 'pinia'
import {
ref} from 'vue'
import axios from 'axios'
export const useCounterStore = defineStore('counter',()=>{
//数据(state)
const count = ref(0)
const API_URL = '/api/booklist'
cosnt list = ref([])
//getter
const deoubleCount = computed(()=>count.value*2)
//修改数据的方法
//(同步action)
const increment= ()=>{
count.value++
}
//(异步action,与组件中定义数据和方法的风格完全一致)
const loadList = async ()=>{
const res = await axios.get(API_URL)
list.value = res.data
}
//以对象形式返回
return {
count,increment,deoubleCount,list,loadList }
})
2. Components use store
<script setup>
//1、导入`useCounterStore `方法
import {
useCounterStore } from '@/stores/counter'
//2、执行方法得到counterStore对象
const counterStore = useCounterStore ()
console.log(counterStore)
//counterStore 对象包含的就是counter仓库中return出来的对象
onMounted(()=>{
counterStore.loadList()
})
</script>
<template>
<button @click="counterStore.increment ">
{
{
counterStore.count}}{
{
counterStore.deoubleCount }}
</button>
<ul>
<li v-for="item in counterStore.list" :key="item.id")>
{
{
item.name}}
</li>
</ul>
</template>
print counterStore
storeToRefs
Why use storeToRefs? It can simplify the writing. The original counterStore.count can directly use count through deconstruction. It is specifically noted in the Chinese document that the store cannot be deconstructed directly, which will destroy the responsiveness. Responsiveness is lost and views are no longer updated. So using the storeToRefs function can assist in maintaining responsive destructuring of data (state+getter)
Valid writing:
Observe the difference, under the wrong writing, print count, deoubleCount, get two 0
In the correct way, print count, deoubleCount, and get two responsive objects.
The method does not need to deconstruct and assign values through the storeToRefs function, but directly deconstructs and assign values from the original counterStore
const {
increment } = counterStore