Piana：Vue专属最新状态管理库（Vuex状态管理工具的替代）
- Provide a simpler API (remove mutation)
- Provide a combined style API consistent with the syntax of vue3
- Remove the concept of modules, each store is an independent module
- Use with TypeScript to provide reliable type judgment
Install Piana
You can view the official Piana documentation to operate
用自己喜欢的包管理器执行安装命令就好了，个人喜好npm
npm install pinia
After the installation is successful, you need to add Piana to the project as shown in the following code:
//1、导入creatPiana
import {
createPinia } from 'pinia'
//2、执行方法得到实例
const piana = createPinia()
//3、把Piana实例加入到app应用中
createApp(App).use(piana).mount('#app')
Preliminary use of Piana to complete counter self-increment
store: a warehouse for storing data (can be regarded as a public component) we need to use the defineStore method to create, this store will store the data used globally, as shown in the following code
import {
defineStore } from "pinia";
import {
ref } from "vue";
export const useCounterStore = defineStore(
'counter' , () => {
//定义数据
const count = ref(0)
//定义修改数据的方法（action 同步+异步）
const increment = () => {
count.value ++
}
//以对象形式return供数组使用
return {
count,
increment
}
}
)
需要在src目录下创建stores文件夹用来存放创建的各种store
After the main page introduces this store, it will be called as an object, as shown in the following code:
<script setup>
import {
useCounterStore } from './stores/counter';
const counterStore = useCounterStore()
console.log(counterStore)
</script>
<template>
<div>
<button @click="counterStore.increment">{
{counterStore.count}}</button>
</div>
</template>
Getters implemented
Simulation using computed function
import {
defineStore } from "pinia";
import {
computed, ref } from "vue";
export const useCounterStore = defineStore(
'counter' , () => {
//定义数据
const count = ref(0)
//定义修改数据的方法（action 同步+异步）
const increment = () => {
count.value ++
}
//getter定义
const doubleCount = computed(() => count.value * 2)
//以对象形式return供数组使用
return {
count,
increment,
doubleCount
}
}
)
asynchronous action
Piana去掉mutation只使用action来实现同步和异步
<script setup>
import {
useCounterStore } from './stores/counter';
import {
onMounted } from 'vue';
const counterStore = useCounterStore()
console.log(counterStore)
onMounted(() => {
counterStore.getList()
})
</script>
<template>
<div>
<button @click="counterStore.increment">{
{counterStore.count}}</button>
<div>{
{counterStore.doubleCount}}</div>
<ul>
<li v-for="item in counterStore.list" :key="item.id">
{
{item.name}}
</li>
</ul>
</div>
</template>
import {
defineStore } from "pinia";
import {
computed, ref } from "vue";
import axios from "axios";
export const useCounterStore = defineStore(
'counter' , () => {
//定义数据
const count = ref(0)
//定义修改数据的方法（action 同步+异步）
const increment = () => {
count.value ++
}
const API_URL = "https://geek.itheima.net/V1_0/channels"
//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,
increment,
doubleCount,
list,
getList
}
}
)
Direct assignment to store deconstruction will result in loss of responsiveness (data type). To solve this problem, we need to use the storeToRefs method to wrap the store (data) that needs to be deconstructed. The method can be directly deconstructed
//直接解构会导致响应式丢失
//const {count , doubleCount} = useCounterStore
//使用storeToRefs对需要解构的store响应式不会丢失
const {
count , doubleCount} = storeToRefs(useCounterStore)
//在对方法进行结构时，直接解构即可，storeToRefs只用来包裹数据
const{
increment } = useCounterStore