为什么现在更推荐使用Pinia?深入了解Pinia,解锁响应式数据的新姿势

1. pinia的安装和使用

csharp 复制代码
yarn add pinia
# 或者使用 npm
npm install pinia
javascript 复制代码
import App from './App.vue'
import { createApp } from 'vue'
import { createPinia } from 'pinia'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

具体详细步骤可以参照Pinai官方文档

2. pinin与vuex的异同

同:

  1. 状态管理:Pinia 和 Vuex 都是状态管理的工具,允许你在应用中统一管理和共享数据。
  2. 响应式:它们都利用 Vue 的响应式系统来跟踪状态的变化,并更新相关的组件。
  3. 插件化:都可以通过插件的形式扩展功能。

异:

  1. API 设计:Pinia 更面向未来,使用了更现代的 API 设计,提供了更简单和直观的方法来定义和使用状态。
  2. 模块化:Pinia 支持模块化的状态管理,每个模块都有自己的状态、操作和订阅者,使代码更易维护和组织。
  3. 性能:Pinia 在某些情况下可能比 Vuex 更高效,因为它使用了 Vue 3 的 reactivity system,可以更好地利用原生的响应式特性。
  4. TypeScript 支持:Pinia 对 TypeScript 的支持更好,提供了更好的类型推断和类型安全。

总的来说,Pinia 更加现代化并且在 Vue 3 中得到了更好的集成,如果你正在开发 Vue 3 项目并且喜欢模块化的状态管理,那么 Pinia 可能是一个更好的选择。而对于传统的 Vue 2 项目,或者需要与大量现有 Vuex 代码交互的项目,则可以继续使用 Vuex。

3. 功能实现

3.1 定义 state 和 getter

js 复制代码
// stores/counter.js
// 导入一个 defineStore 方法
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// 抛出方法
export const useCounterStore = defineStore('counter',() => {
    // 定义数据 (state)
    const count = ref(0)
    
    // state定义修改数据方法(action 同步操作)
    const increment = () => {
        count.value++
    }
    
    // getter定义
    const doubleCounter = computed(() => {
        return count.value * 2
    })
    
    // 以对象的方式return提供数组使用
    return { 
        count,
        increment,
        doubleCounter
        }
})
html 复制代码
<template>
    <button @click="counterStore.increment">{{ counterStore.count }}</button>
    <p>{{ counterStore.doubleCounter }}</p>
</template>

<script setup>
// 1. 导入 useCounterStore 方法
import { useCounterStore } from '@/stores/counter.js'

// 2. 执行方法得到 store 实例对象
const counterStore = useCounterStore()

console.log(counterStore)
// 打印Proxy

</script>

我们可以看到响应式对象count成功在vue文件中显示,并实现了getter中的doubleCounter方法,点击后count*2,我们再来看看执行方法得到 store 实例对象counterStore的打印结果是一个Proxy对象,而我们在stores/counter.js文件中定义的countincrementdoubleCounter也全部传入到vue文件中供实例对象counterStore使用。

3.2 定义action异步方法

先导入axios

npm install axios
js 复制代码
// stores/counter.js
// 导入一个方法 defineStore
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import axios from 'axios'

// 抛出方法
export const useCounterStore = defineStore('counter',() => {
    // 定义数据 (state)
    const count = ref(0)
    // 接口调用
    const API_URL = 'http://geek.itheima.net/v1_0/channels'
    
    // state定义修改数据方法 (action 同步操作)
    const increment = () => {
        count.value++
    }

    // getter定义
    const doubleCounter = computed(() => {
        return count.value * 2
    })

    // action定义异步方法
    const list = ref([])
    // getlist 方法从API 获取数据并存储到 list 中,它是一个异步的操作,利用 axios 发起了一个 HTTP GET 请求。
    const getlist = async () => {
        const res = await axios.get(API_URL)
        list.value = res.data.data.channels
    }

    // 以对象的方式return提供数组使用
    return { 
        count,
        increment,
        doubleCounter,
        list,
        getlist}
})
html 复制代码
<template>
  <div>
    <button @click="counterStore.increment">{{ counterStore.count }}</button>
    <p>{{ counterStore.doubleCounter }}</p>
    
    <ul>
      <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
    </ul>
    
  </div>
</template>

<script setup>
// 导入 useCounterStore 方法
import { useCounterStore } from '@/stores/counter.js'
// 导入生命周期函数
import { onMounted } from 'vue';

// 执行方法得到 store 实例对象
const counterStore = useCounterStore()

console.log(counterStore)
// 打印Proxy

// 使用异步操作 getlist 并渲染到列表中
onMounted(()=>{
  counterStore.getlist()
})

</script>

<style lang="scss" scoped>
</style>

我们在stores/counter.js文件中定义异步方法getlist 成功从远程 API 获取数据并存储到 list 中,所有功能全部传入到vue文件中供实例对象counterStore使用。

在 Pinia 中,mutation 不是必须的,但可以作为一种可选的方式来修改状态。相比于 Vuex,Pinia 更加灵活,你可以直接在 action 中修改状态,而无需显式地定义 mutation。这样可以简化代码结构并减少一些模板代码。如果你希望更明确地追踪状态的变更,并且想要确保状态的修改是同步的,那么也可以使用 mutation。

4. 提问与归纳

  1. Pinia是用来做什么的? 答:集中状态管理工具,新一代的vuex。

  2. Pinia中还需要mutation吗? 答:不需要,action既支持同步也支持异步

  3. Pinia如何实现getter? 答:computed计算属性函数

  4. Pinia产生的Store如何解构赋值数据保持响应式? 答:storeToRefs

关于第四点问题,可以来看看笔者的Pinia 状态管理利器:探秘 storeToRefs 的神奇魔力

相关推荐
待磨的钝刨27 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式