亲宝软件园·资讯

展开

使用Pinia代替Vuex Vue状态管理之使用Pinia代替Vuex

rogepi 人气:3
想了解Vue状态管理之使用Pinia代替Vuex的相关内容吗,rogepi在本文为您仔细讲解使用Pinia代替Vuex的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue状态管理,Pinia代替Vuex,下面大家一起来学习吧。

1、Pinia是什么

Pinia是一个vue的状态管理方案,是vuex团队成员开发,实现了很多vuex5的提案,更加地轻量化且有devtools的支持

vuex4一直被人诟病对于typescript的支持不良好,vuex5也迟迟未来

所以有了pinia的出现

相较于vuex:

Pinia文档有这么一段话:

Pinia 试图尽可能接近 Vuex 的理念。 它旨在测试 Vuex 下一次迭代的提案,并且取得了成功,因为我们目前有一个针对 Vuex 5 的开放 RFC,其 API 与 Pinia 使用的 API 非常相似。 请注意,我(Eduardo),Pania 的作者,是 Vue.js 核心团队的一员,并积极参与了 Router 和 Vuex 等 API 的设计。 我个人对这个项目的意图是重新设计使用全局 Store 的体验,同时保持 Vue 平易近人的哲学。 我让 Pania 的 API 与 Vuex 一样接近,因为它不断向前发展,以便人们可以轻松地迁移到 Vuex 或什至在未来融合两个项目(在 Vuex 下)。

所以现在学习Pinia,相当于提前学习Vuex5就是说

2、Pinia简单上手

首先我们初始化一个vite+vue+ts工程

pnpm create vite pinia-demo -- --template vue-ts

安装pinia

pnpm i pinia

打开项目,编辑src目录下的mian.ts文件,引入Pinia

// main.ts
​
import { createApp } from 'vue'
import App from './App.vue'
​
import { createPinia } from 'pinia'
​
createApp(App).use(createPinia()).mount('#app')

src目录下创建一个store文件夹用来存放状态管理,然后新建一个counter.ts,我们来做一个简单的计数器状态应用

import { defineStore } from 'pinia'
​
export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Pinia通过defineStore函数来创建一个store,它接收一个id用来标识store,以及store选项

我们也可以使用一个回调函数来返回options,回调函数体内的写法类似vuesetup()写法,比如上面的定义可以写成

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function doubleCount() {
    return count.value * 2
  }
  function increment() {
    count.value++
  }
​
  return { count, increment }
})

接着我们在App.vue中使用store

<script setup lang="ts">
import { useCounterStore } from './store/counter'
const useCounter = useCounterStore()
</script>
​
<template>
  <h2>{{ useCounter }}</h2>
  <h2>{{ useCounter.count }}</h2>
  <h2>{{ useCounter.doubleCount() }}</h2>
  <button @click="useCounter.increment">increment</button>
</template>
​
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在使用Pinia的过程中可以发现自动补全是相当优秀

浏览器运行如下:

打开开发者工具查看vue devtool

vue devtool支持对Pinia状态的增删改查!

Pinia有多种对状态的修改方式:

const countPlus_1 = useCounter.count++

使用store$patch函数,支持选项和回调函数两种写法,回调函数适用于状态为数组或其他之类的需要调用状态方法进行修改

const countPlus_2 = useCounter.$patch({ count: useCounter.count + 1 })

const countPlus_3 = useCounter.$patch((state) => state.count++)

对状态的结构需要使用StoreToRefs函数

const { count } = storeToRefs(useCounter)

3、使用体验

Pinia的学习和使用是相当友好的,看一遍官方文档就能上手,在上手过程中可以明显地感受到相对于vuex更加快捷,编码体验优秀。

状态管理对于小项目来说更注重于方便和快捷(甚至可以不想需要),所以像vuex是稍微有些复杂了,像vue3出beta的时候就有人说可以使用组合式api比如provideinject配合来替代vuex,所以Pinia这个轻量级状态管理方案的出现是相当及时的。

加载全部内容

相关教程
猜你喜欢
用户评论