qidao123.com技术社区-IT企服评测·应用市场

标题: Pinia：Vue 2 和 Vue 3 中更好用的状态管理框架 [打印本页]

---

作者: 伤心客    时间: 2024-9-6 02:26
标题: Pinia：Vue 2 和 Vue 3 中更好用的状态管理框架


前言

还在用Vuex? 在Vue应用步伐的开辟过程中，高效且易于维护的状态管理一直是开辟者关注的核心题目之一。随着Vue 3的发布，状态管理领域迎来了一位新星——Pinia，它不仅为Vue 3量身打造，同时也向下兼容Vue 2，以其简便的API设计、强盛的功能特性，逐渐成为Vue社区中备受推许的状态管理框架。本文将深入探讨Pinia的魅力所在，并阐述为何它是Vue 2/Vue 3应用中更优的选择。
Pinia简介

Pinia是由Vue.js的核心维护者之一尤雨溪参与设计的下一代状态管理库，旨在提供一种更直观、更灵活的方式来管理Vue应用的状态。不同于传统的Vuex，Pinia从底层开始构建，充实使用Vue 3的新特性，特殊是Composition API，使得状态管理变得更加自然和高效。
官网地址：Pinia | The intuitive store for Vue.js
Pinia凭借其当代化的设计理念、与Vue 3的深度融合、以及对Vue 2的精良兼容性，成为了Vue应用状态管理的新尺度。无论你是Vue 2的忠实用户，还是Vue 3的探索者，Pinia都值得作为首选状态管理框架纳入你的开辟工具箱。它不仅可以或许简化状态管理的复杂度，提升开辟效率，还能在未来Vue生态的发展中为你提供坚固的支持。

为什么选择Pinia？

1. 简便的API设计
直观的Store结构：Pinia通过defineStore函数创建store，每个store都是一个独立的模块，无需复杂的配置即可上手。
Action代替Mutation：Pinia合并了Mutation和Action的概念，直接在Action中修改状态，无论是同步还是异步操纵，都更加直观和灵活。
2. Vue 3完善集成
Composition API友爱：Pinia与Vue 3的Composition API无缝对接，使得状态管理逻辑可以轻松复用和组合。
响应式优化：得益于Vue 3的改进，Pinia在状态更新和响应式方面表现更佳，提升应用性能。
3. 强盛的工具支持
类型安全：Pinia提供了精良的TypeScript支持，使得状态管理更加健壮和易于维护。
DevTools：Pinia拥有自己的DevTools插件，方便开辟者调试状态变化，提高开辟效率。
4. 灵活性与模块化
轻量级模块化：每个store都是一个独立单元，易于组织和复用，无需像Vuex那样显式声明模块。
易于扩展：Pinia的设计允许开辟者根据必要轻松添加自定义插件或功能。
5. Vue 2兼容性
只管为Vue 3而生，Pinia通过集成@vue/composition-api，同样能在Vue 2项目中发挥效能，为Vue 2用户提供了一条平滑过渡至Vue 3的路径。
使用Pinia

在你的项目中安装 Pinia 非常简单。首先，确保已经安装了 Vue CLI 或 Vite，然后按照以下步骤安装 Pinia：

1. # 如果使用 npm
2. npm install pinia
4. # 如果使用 yarn
5. yarn add pinia

复制代码

在 Vue 3 中使用 Pinia

以下是一个简单的使用示例：

• 创建 Pinia 实例并挂载到 Vue 应用
  

1. // main.js
2. import { createApp } from 'vue'
3. import { createPinia } from 'pinia'
4. import App from './App.vue'
6. const app = createApp(App)
7. const pinia = createPinia()
9. app.use(pinia)
10. app.mount('#app')

复制代码

• 定义一个 Store
  

1. // stores/counter.js
2. import { defineStore } from 'pinia'
4. export const useCounterStore = defineStore('counter', {
5.   state: () => ({
6.     count: 0
7.   }),
8.   actions: {
9.     increment() {
10.       this.count++
11.     }
12.   },
13.   getters: {
14.     doubleCount: (state) => state.count * 2
15.   }
16. })

复制代码

• 在组件中使用 Store
  

1. // components/Counter.vue
2. <template>
3.   <div>
4.     <p>Count: {{ count }}</p>
5.     <p>Double Count: {{ doubleCount }}</p>
6.     <button @click="increment">Increment</button>
7.   </div>
8. </template>
10. <script>
11. import { useCounterStore } from '../stores/counter'
13. export default {
14.   setup() {
15.     const store = useCounterStore()
16.     return {
17.       count: store.count,
18.       doubleCount: store.doubleCount,
19.       increment: store.increment
20.     }
21.   }
22. }
23. </script>

复制代码

尚有另一种可能的语法来定义存储。与 Vue Composition API 的setup 函数类似，可以传入一个定义响应式属性和方法的函数，并返回一个具有我们想要公开的属性和方法的对象。 

1. export const useCounterStore = defineStore('counter', () => {
2.   const count = ref(0)
3.   const name = ref('Eduardo')
4.   const doubleCount = computed(() => count.value * 2)
5.   function increment() {
6.     count.value++
7.   }
9.   return { count, name, doubleCount, increment }
10. })

复制代码

• ref()成为state属性
  
• computed()成为getters
  
• function()成为actions
  

注意，必须返回设置存储中的所有状态属性，以便 Pinia 将它们选为状态。换句话说，不能在存储中拥有私有状态属性。
从 Store 解构

为了从 store 中提取属性并保持其响应性，您必要使用storeToRefs()。它将为每个响应性属性创建 refs。

1. <script setup>
2. import { useCounterStore } from '@/stores/counter'
3. import { storeToRefs } from 'pinia'
5. const store = useCounterStore()
6. // `name` and `doubleCount` are reactive refs
7. // This will also extract refs for properties added by plugins
8. // but skip any action or non reactive (non ref/reactive) property
9. const { name, doubleCount } = storeToRefs(store)
10. // the increment action can just be destructured
11. const { increment } = store
12. </script>

复制代码

在使用 Pinia 时，特殊是在 Vue 3 中，可以通过 storeToRefs() 来解构 store 中的响应性属性，并保持其响应性。这对于从 store 中直接获取状态属性并在组件中使用非常有用。别的，操纵函数可以直接从 store 中解构，因为它们已经绑定到 store 本身。下面具体介绍如何用 storeToRefs() 以及操纵函数的解构：
使用 storeToRefs 解构状态属性

storeToRefs 是一个方便的工具，用于将 store 的响应性状态属性转换为独立的 refs。这样解构后的属性仍然保持响应性。
示例
假设我们有一个简单的 Pinia store：

1. // stores/counter.js
2. import { defineStore } from 'pinia'
3. import { ref, computed } from 'vue'
5. export const useCounterStore = defineStore('counter', () => {
6.   const count = ref(0)
7.   const doubleCount = computed(() => count.value * 2)
9.   function increment() {
10.     count.value++
11.   }
13.   return { count, doubleCount, increment }
14. })

复制代码

在组件中使用 storeToRefs

• 导入 storeToRefs 和 store：
  

1. import { useCounterStore } from '../stores/counter'
2. import { storeToRefs } from 'pinia'

复制代码

• 在 setup 函数中使用 storeToRefs 解构状态属性：
  

1. <script setup>import { useCounterStore } from '../stores/counter'
2. import { storeToRefs } from 'pinia'
3. // 获取 store 实例const counterStore = useCounterStore()// 使用 storeToRefs 解构状态属性const { count, doubleCount } = storeToRefs(counterStore)// 直接解构操纵函数const { increment } = counterStore</script><template>  <div>    <p>Count: {{ count }}</p>    <p>Double Count: {{ doubleCount }}</p>    <button @click="increment">Increment</button>  </div></template>

复制代码

在上面的示例中，使用 storeToRefs 解构了 count 和 doubleCount，确保它们仍然是响应的。别的，直接从 store 中解构了 increment 操纵函数并使用它。
注意事项

• 保持响应性：storeToRefs 确保从 store 解构出来的属性保持响应性。假如你仅使用普通的对象解构赋值，将无法保持响应性。
  
• 操纵函数绑定：操纵函数可以直接从 store 中解构，因为它们已经绑定到 store，这意味着调用它们时会自动处理内部的响应性。
  

 以下是完整的组件代码：

1. <template>  <div>    <p>Count: {{ count }}</p>    <p>Double Count: {{ doubleCount }}</p>    <button @click="increment">Increment</button>  </div></template><script setup>import { useCounterStore } from '../stores/counter'
2. import { storeToRefs } from 'pinia'
3. // 获取 store 实例const counterStore = useCounterStore()// 使用 storeToRefs 解构状态属性const { count, doubleCount } = storeToRefs(counterStore)// 直接解构操纵函数const { increment } = counterStore</script>

复制代码

Composition 和 Options API如何选择

Vue 的 Composition API 和 Options API
在 Vue 3 中使用 Pinia 进行状态管理时，有两种重要方式来定义 stores：Options API Stores 和 Setup Stores。它们各有优缺点，实用于不同的场景。本文将介绍这两种方式，并给出选择的发起。
Options API Stores

Options API Stores 是一种传统的方式，通过定义 state、getters 和 actions 对象来管理状态。这种方式类似于 Vuex 的 API，适合那些风俗或熟悉 Options API 的开辟者。
长处

• 结构清楚：逻辑和数据分离开，结构清楚易维护。
  
• 熟悉度高：与 Vuex 的风格相似，Vuex 用户轻易上手。
  
• 精良的 IDE 支持：由于属性定义在对象内，可以享受精良的 TypeScript 支持和 IDE 的自动补全。
  

缺点

• 代码较冗长：对于复杂的逻辑，代码可能略显冗长。
  

示例

1. // stores/counter.js
2. import { defineStore } from 'pinia'
4. export const useCounterStore = defineStore({
5.   id: 'counter',
6.   state: () => ({
7.     count: 0
8.   }),
9.   getters: {
10.     doubleCount: (state) => state.count * 2
11.   },
12.   actions: {
13.     increment() {
14.       this.count++
15.     }
16.   }
17. })

复制代码

Setup Stores

Setup Stores 使用 Vue 3 的 Composition API 来管理状态。这种方式充实使用了 Composition API 的灵活性，可以将逻辑和状态更加精密地连合在一起。
长处

• 逻辑复用：通过 Composition API，可以轻松实现逻辑复用。
  
• 灵活性高：可以使用 Composition API 的全部功能，如 ref、reactive 和 computed 等。
  
• 更少的模板代码：由于直接使用 Composition API，代码更加简便。
  

缺点

• 学习成本：对于不熟悉 Composition API 的开辟者，必要肯定的学习成本。
  
• TypeScript 支持复杂：由于 Setup Stores 依赖于 Composition API，TypeScript 的类型推断和自动补全可能必要更多的手动配置。
  

示例

1. // stores/counter.js
2. import { defineStore } from 'pinia'
3. import { ref, computed } from 'vue'
5. export const useCounterStore = defineStore('counter', () => {
6.   const count = ref(0)
7.   const doubleCount = computed(() => count.value * 2)
9.   function increment() {
10.     count.value++
11.   }
13.   return { count, doubleCount, increment }
14. })

复制代码

如何选择？

选择 Options API Stores 的场景

• 风俗 Vuex 风格：假如你或者你的团队成员风俗了 Vuex 的风格，Options API Stores 会更加适合。
  
• 项目复杂度较低：对于简单的项目，Options API Stores 的结构更加清楚直观。
  
• 注重 TypeScript 支持：假如你的项目 heavily 依赖于 TypeScript，Options API Stores 提供了更好的 IDE 自动补全和类型推断支持。
  

选择 Setup Stores 的场景

• 熟悉 Composition API：假如你或者你的团队已经熟悉了 Composition API，Setup Stores 可以充实使用其灵活性。
  
• 必要逻辑复用：假如你的项目中必要在多个组件之间复用逻辑，Setup Stores 通过 Composition API 可以很轻易地实现。
  
• 项目复杂度较高：对于复杂的大型项目，Setup Stores 可以保持代码更加简便和模块化。
  

混淆使用

值得注意的是，Pinia 允许你在同一个项目中混淆使用 Options API Stores 和 Setup Stores。这意味着你可以根据具体场景选择最适合的方式。比方，可以在简单的模块中使用 Options API Stores，而在必要复杂逻辑复用的模块中使用 Setup Stores。
在 Vue 2 中使用 Pinia

Pinia 也支持在 Vue 2 中使用，以下是一个基本的示例：

• 在 Vue 2 项目中安装 @vue/composition-api
  

1. npm install @vue/composition-api

复制代码

• 在项目入口文件中配置 Pinia
  

1. // main.js
2. import Vue from 'vue'
3. import VueCompositionAPI from '@vue/composition-api'
4. import { createPinia, PiniaVuePlugin } from 'pinia'
5. import App from './App.vue'
7. Vue.use(VueCompositionAPI)
8. Vue.use(PiniaVuePlugin)
10. const pinia = createPinia()
12. new Vue({
13.   pinia,
14.   render: h => h(App)
15. }).$mount('#app')

复制代码

• 定义并使用 Store 定义和使用 Store 的方式与在 Vue 3 中基本同等。
  

1. // stores/counter.js
2. import { defineStore } from 'pinia'
4. export const useCounterStore = defineStore('counter', {
5.   state: () => ({
6.     count: 0
7.   }),
8.   actions: {
9.     increment() {
10.       this.count++
11.     }
12.   },
13.   getters: {
14.     doubleCount: (state) => state.count * 2
15.   }
16. })

复制代码

1. // components/Counter.vue
2. <template>
3.   <div>
4.     <p>Count: {{ count }}</p>
5.     <p>Double Count: {{ doubleCount }}</p>
6.     <button @click="increment">Increment</button>
7.   </div>
8. </template>
10. <script>
11. import { useCounterStore } from '../stores/counter'
12. import { defineComponent } from '@vue/composition-api'
14. export default defineComponent({
15.   setup() {
16.     const store = useCounterStore()
17.     return {
18.       count: store.count,
19.       doubleCount: store.doubleCount,
20.       increment: store.increment
21.     }
22.   }
23. })
24. </script>

复制代码

reactive和ref区别

在 Vue 3 的 Composition API 中，reactive 和 ref 是两个用于创建响应式数据的方法。它们在创建、使用和工作方式上有一些重要的区别。下面具体介绍这两者的区别：
ref 简介

ref 用于创建一个单一的响应式变量。假如你有一个简单的原始数据（如字符串、数值、布尔值等）或对象，并希望它成为响应式的，可以使用 ref。
特点

• 单一响应式值：ref 通常用于创建一个响应式的原始数据或对象。
  
• 访问值：通过 .value 属性来访问或修改 ref 包裹的数据。
  
• 模板中自动展开：在模板中直接使用 ref，无需 .value，Vue 会自动处理。
  

示例

1. import { ref } from 'vue'
3. export default {
4.   setup() {
5.     // 创建一个响应式的数值
6.     const count = ref(0)
8.     // 使用 .value 访问和修改值
9.     count.value++
11.     return {
12.       count
13.     }
14.   }
15. }

复制代码

在模板中：

1. <template>
2.   <div>
3.     <p>Count: {{ count }}</p>
4.     <button @click="count++">Increment</button>
5.   </div>
6. </template>

复制代码

reactive 简介

reactive 用于创建一个响应式对象或数组。它将整个对象或数组转换为响应式的，使其内部的所有属性都变为响应式。
特点

• 响应式对象或数组：reactive 通常用于创建一个复杂的响应式对象或数组。
  
• 直接访问属性：无需 .value，可以直接访问和修改内部的属性。
  
• 适合复杂结构：更适合具有多个属性或嵌套结构的对象。
  

示例

1. import { reactive } from 'vue'
3. export default {
4.   setup() {
5.     // 创建一个响应式对象
6.     const state = reactive({
7.       count: 0,
8.       name: 'Vue'
9.     })
11.     // 直接访问和修改属性
12.     state.count++
13.     state.name = 'Vue 3'
15.     return {
16.       state
17.     }
18.   }
19. }

复制代码

在模板中：

1. <template>
2.   <div>
3.     <p>Count: {{ state.count }}</p>
4.     <p>Name: {{ state.name }}</p>
5.     <button @click="state.count++">Increment</button>
6.   </div>
7. </template>

复制代码

ref vs reactive

• 使用目的：
  
  
  
  • ref：实用于创建单一的原始数据或对象的响应式引用。
    
  • reactive：实用于创建整个对象或数组的响应式状态。
    
  
  
• 访问和修改：
  
  
  
  • ref：通过 .value 访问和修改数据。
    
  • reactive：直接访问和修改对象或数组的属性。
    
  
  
• 实用场景：
  
  
  
  • ref：实用于简单的数据结构或单一的变量。
    
  • reactive：实用于复杂的数据结构，包罗多个属性和嵌套对象。
    
  
  

现实应用中的选择

• 简单变量：假如你只是必要一个简单的响应式变量，比如数值、布尔值或字符串，那么 ref 是一个更符合的选择。
  
• 复杂对象：假如你的状态包罗多个属性或嵌套结构，那么 reactive 更加实用。
  

组合使用

在现实开辟中，有时必要将 ref 和 reactive 组合使用。比方，你可以在一个 reactive 对象中包罗多个 ref，或者在一个 ref 中嵌套 reactive 对象处理更复杂的情况。
连合示例

1. import { ref, reactive } from 'vue'
3. export default {
4.   setup() {
5.     const user = reactive({
6.       name: 'John',
7.       age: ref(30) // 使用 ref 创建单独的响应式属性
8.     })
10.     const incrementAge = () => {
11.       user.age.value++
12.     }
14.     return {
15.       user,
16.       incrementAge
17.     }
18.   }
19. }

复制代码

在模板中：

1. <template>
2.   <div>
3.     <p>Name: {{ user.name }}</p>
4.     <p>Age: {{ user.age }}</p>
5.     <button @click="incrementAge">Increment Age</button>
6.   </div>
7. </template>

复制代码

总结起来，ref 和 reactive 是 Vue 3 中强盛的工具，可以或许帮助你创建和管理响应式状态。通过相识它们的区别和使用场景，你可以更好地在项目中应用它们，使状态管理更加清楚和高效。
组合式api和选项式api的选择

Introduction | Vue.js
在 Vue 3 中，组合式 API（Composition API）和选项式 API（Options API）各有优缺点，实用于不同的场景和需求。选择使用哪个 API 重要取决于团队的熟悉水平、项目的复杂性以及个人偏好。以下是对两种 API 的具体比较和保举发起。
选项式 API（Options API）

特点

• 结构清楚: 选项式 API 将数据、方法、计算属性等明确定义在不同的选项中，如 data、methods、computed 等。
  
• 易学易用: 对于初学者来说，选项式 API 更加直观，易于明白和上手。
  
• 直观的生命周期钩子: 选项式 API 中的生命周期钩子非常明确，如 created、mounted 等。
  

示例

1. export default {
2.   data() {
3.     return {
4.       count: 0
5.     }
6.   },
7.   computed: {
8.     doubleCount() {
9.       return this.count * 2;
10.     }
11.   },
12.   methods: {
13.     increment() {
14.       this.count++;
15.     }
16.   },
17.   mounted() {
18.     console.log('Component has been mounted');
19.   }
20. }

复制代码

组合式 API（Composition API）

特点

• 更好的逻辑复用: 通过组合式 API 的 setup 函数可以灵活地复用逻辑，不同组件可以共享相同的逻辑。
  
• 更强的灵活性: 组合式 API 允许在一个函数中组织干系逻辑和状态，使得代码更轻易维护和明白，尤其是大型项目。
  
• TypeScript 支持更佳: 由于组合式 API 更靠近函数式编程风格，TypeScript 的类型推断和自动补全更自然，代码也更易于类型定义和查抄。
  
• 更精细的生命周期控制: 通过组合式 API，你可以在 setup 函数中更精细地控制组件的生命周期。
  

示例

1. import { ref, computed, onMounted } from 'vue';
3. export default {
4.   setup() {
5.     const count = ref(0);
6.     const doubleCount = computed(() => count.value * 2);
8.     function increment() {
9.       count.value++;
10.     }
12.     onMounted(() => {
13.       console.log('Component has been mounted');
14.     });
16.     return {
17.       count,
18.       doubleCount,
19.       increment
20.     };
21.   }
22. }

复制代码

如何选择？

选择选项式 API 的场景

• 初学者或简单项目: 对于刚开始学习 Vue 的开辟者或简单的小型项目，选项式 API 更加直观易懂，入门门槛低。
  
• 维护现有代码: 假如你必要维护一个已经使用选项式 API 编写的大型老项目，继续使用选项式 API 可能更为符合。
  

选择组合式 API 的场景

• 大型项目或复杂应用: 组合式 API 更适合于大型项目或复杂的应用，因为它可以更好地组织和复用代码。
  
• 必要重用逻辑: 假如你的项目中必要在多个组件间复用逻辑，组合式 API 更加灵活和高效。
  
• TypeScript 项目: 假如你的项目广泛使用 TypeScript，组合式 API 提供了更友爱的类型支持和自动补全。
  

混淆使用

值得注意的是，Vue 3 同时支持选项式 API 和组合式 API，你可以在同一个项目中混淆使用这两种方式。这意味着你可以逐渐迁移，或者在不同的组件中选择最适合的方式。
最佳实践及保举

总体来说，假如你在开始一个新的 Vue 3 项目，并且希望使用 Vue 3 的全部新特性，组合式 API 通常是更好的选择。它提供了更强的灵活性和更好的逻辑复用，同时也更适合复杂的应用和大型项目。
然而，假如你或者你的团队对选项式 API 更加熟悉，并且当前项目的复杂度不高，那么选项式 API 依然是一个非常好的选择，可以或许满足需求并且快速上手。
使用组合式 API 还是选项式 API，取决于你的具体需求和偏好。对于新的项目和复杂的应用，保举使用组合式 API，以充实使用 Vue 3 的新功能和灵活性。对于简单项目或已经在使用选项式 API 的现有项目，选项式 API 依然是一个很好的选择。无论选择哪种方式，都必要根据项目的现实情况进行决策。
总结 

总得来说，Pinia 就是 Vuex 的替代版，可以更好的兼容 Vue2，Vue3以及TypeScript。在Vuex的基础上去掉了 Mutation，只保留了 state, getter和action。Pinia拥有更简便的语法， 扁平化的代码编排，符合Vue3 的 Composition api。
其他资源

 vue3中使用pinia代替vuex_vue3使用vuex还是pinia-CSDN博客
使用 Vue 3.0，你可能不再必要Vuex了-CSDN博客 
Pinia：全新的Vue状态管理库，Vuex的代替者_pinia dispatch-CSDN博客
Vue 状态管理：从Vuex到Pinia，Vue 3官方保举的状态管理库深度解析-CSDN博客
cool-admin-vue: cool-admin一个很酷的背景权限管理框架，模块化、插件化、CRUD极速开辟，永久开源免费，基于midway2.0、typeorm、mysql、jwt、element-ui、vuex、vue-router、vue等构件

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)

Powered by Discuz! X3.4