上篇文章: 【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的各个特性,我们能够更好地构建复杂的应用程序,提高代码的可维护性和可读性,从而为用户带来更优质的体验。