上篇文章: 【Vue】Vue3.0(十一)Vue 3.0 中 computed 计算属性概念、使用及示例
🏡作者主页:点击!
🤖Vue专栏:点击!
⏰️创作时间:2024年11月10日15点23分
文章目录
- 一、前言
- 二、Pinia基础与setup语法糖的融合
- (一)理解Pinia的核心优势
- (二)setup语法糖简介
- 三、Pinia的安装与基本配置
- (一)安装Pinia
- (二)在项目中配置Pinia
- 四、创建和使用Store
- (一)创建一个简单的Store示例
- (二)在组件中使用Store(基于setup语法糖)
- 五、深入理解State在setup中的使用
- (一)响应式State的原理
- (二)直接修改State
- 六、Getters的灵活运用
- (一)计算属性风格的Getters
- (二)传递参数的Getters
- 七、强大的Actions功能
- (一)同步和异步Actions
- (二)在组件中调用Actions
- 八、Store之间的交互
- (一)在不同Store中共享数据和方法
- 九、结论
一、前言
在Vue 3.0的开发中,高效的状态管理是构建大型应用的关键。Pinia作为专为Vue 3设计的状态管理库,结合setup语法糖,能让我们更优雅地处理应用状态。本文将详细阐述在使用setup语法糖的情况下,Pinia在Vue 3.0中的使用细节。
二、Pinia基础与setup语法糖的融合
(一)理解Pinia的核心优势
Pinia提供了一种简洁且直观的方式来管理应用状态。与传统的状态管理方式相比,它具有更好的类型推断、更灵活的模块结构,在与Vue 3.0的setup语法糖配合时,能减少大量样板代码。
(二)setup语法糖简介
setup函数是Vue 3.0中一个新的组件选项,它在组件创建之前执行。在这个函数中,可以使用Composition API来组织逻辑。使用setup语法糖可以让我们更方便地在组件中引入和使用Pinia的Store。
三、Pinia的安装与基本配置
(一)安装Pinia
通过npm安装Pinia到Vue 3.0项目中:
npm install pinia
(二)在项目中配置Pinia
在main.js(或main.ts)中,创建并挂载Pinia实例:
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');
四、创建和使用Store
(一)创建一个简单的Store示例
创建一个名为counterStore.js
(或counterStore.ts
)的文件:
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++;
}
}
});
(二)在组件中使用Store(基于setup语法糖)
在Vue组件中:
<template>
<div>
<p>Count: {{ counterStore.count }}</p>
<p>Double Count: {{ counterStore.doubleCount }}</p>
<button @click="counterStore.increment">Increment</button>
</div>
</template>
<script setup>
import { useCounterStore } from './counterStore';
const counterStore = useCounterStore();
</script>
另外一个例子:
count.ts
import { defineStore } from "pinia";
export const useCountStore = defineStore(
'count',
//pinia中真正存储数据的地方
{
actions:{
increment(value: number){
this.sum+=value
}
},
state(){
return{
sum:6
}
}
}
);
在count中我要实现对store中sum值的增减,那写法有三种:
- //第一种 修改某个值的时候,这种的修改最为方便
countStore.sum+=n.vaue
//第二种 :需改多个值的时候这种使用的较多
countStore.$patch({
})
- //第三种:当对数据的处理方法也被别的组件使用,需要对这个数据处理的动作形成一个公共的方法的话,需要在store中形成一个action,然后再在vue中的调用
countStore.increment(n.value) //这个是一个store中的action
Count.vue
<template>
<div class="count">
<h2>当前求和为:{{countStore.sum}}</h2>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add">加</button>
<button @click="minus">减</button>
</div>
</template>
<script lang="ts" setup name="Count">
import { reactive, ref } from 'vue';
//引入pinia中的数据
import {useCountStore} from '@/store/count'
import { log } from 'console';
//数据
//使用store得到一个count相关的store
const countStore =useCountStore();
let n =ref(1); //用户选择的数字
//方法
function add(){
// sum.value+=n.value
//第一种 修改某个值的时候,这种的修改最为方便
countStore.sum+=n.vaue
//第二种 :需改多个值的时候这种使用的较多
countStore.$patch({
})
//第三种:当对数据的处理方法也被别的组件使用,需要对这个数据处理的动作形成一个公共的方法的话,需要在store中形成一个action,然后再在vue中的调用
countStore.increment(n.value)
}
function minus(){
// sum.value-=n.value
}
</script>
<style scoped>
.count {
background-color: skyblue;
padding: 10;
border-radius: 10px;
box-shadow: 0 0 10px;
}
select,button {
margin: 0 5px;
height: 25px;
}
</style>
五、深入理解State在setup中的使用
(一)响应式State的原理
在Pinia的Store中,state是响应式的。当使用setup语法糖时,这种响应式机制无缝衔接。这是因为Pinia内部使用了Vue 3.0的响应式系统,对state进行了包装,使得在组件中使用时,能够自动更新视图。
(二)直接修改State
虽然可以直接通过this.count++
这样的方式在actions中修改state,但不建议在组件中直接修改store的state。应该通过定义好的actions来保证数据的一致性和可维护性。
六、Getters的灵活运用
(一)计算属性风格的Getters
Getters在Pinia中类似于计算属性。在setup中使用时,它们会根据依赖的state自动计算和缓存结果。例如,doubleCount
这个getter会在count
变化时重新计算。
(二)传递参数的Getters
除了简单的计算属性风格的getters,Pinia还支持带有参数的getters。这可以让我们根据不同的条件计算出不同的值。例如:
getters: {
multiplyCount: (state) => (factor) => state.count * factor
}
在组件中使用:
<template>
<div>
<button @click="console.log(counterStore.multiplyCount(3))">Multiply by 3</button>
</div>
</template>
七、强大的Actions功能
(一)同步和异步Actions
Actions可以是同步或异步的。同步actions如increment
可以直接修改state。异步actions则可以用于处理网络请求等异步操作。例如:
actions: {
async fetchData() {
const response = await fetch('https://example.com/data');
const data = await response.json();
// 处理数据并可能修改state
}
}
(二)在组件中调用Actions
在setup中,可以直接调用store的actions。对于异步actions,可以使用async/await
来处理异步流程。例如:
<template>
<div>
<button @click="fetchData">Fetch Data</button>
</div>
</template>
<script setup>
import { useCounterStore } from './counterStore';
const counterStore = useCounterStore();
const fetchData = async () => {
await counterStore.fetchData();
};
</script>
八、Store之间的交互
(一)在不同Store中共享数据和方法
有时候,不同的Store之间需要共享数据或调用彼此的方法。可以通过在一个Store中引入另一个Store来实现。例如,如果有一个userStore
和counterStore
,userStore
可以在某个action中调用counterStore
的方法:
import { defineStore } from 'pinia';
import { useCounterStore } from './counterStore';
export const useUserStore = defineStore('user', {
state: () => ({
username: 'default'
}),
actions: {
resetCounter() {
const counterStore = useCounterStore();
counterStore.count = 0;
}
}
});
九、结论
在Vue 3.0中,结合setup语法糖使用Pinia可以让状态管理变得更加简洁、高效和灵活。通过深入理解和运用Pinia的各个特性,我们能够更好地构建复杂的应用程序,提高代码的可维护性和可读性,从而为用户带来更优质的体验。