vue3 到底要不要用pinia !

原创已于 2025-01-27 10:28:46 修改 · 216 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2025-01-27 09:43:54 首次发布

前端技术专栏收录该内容

3 篇文章

订阅专栏

之前使用vue3都是在公司的基建项目中，为了快速达到目的，把以前vue2的模板拿来简单改改就直接用了，所以项目中用法特别乱，比如：状态管理依旧用的vuex，各种类型定义全是any，有些代码是选项式API，有些代码是组合式API...

最近终于有时间推动一下业务项目使用vue3了。作为极简主义的我，始终奉行少即是多，既然是新场景，一切从新，从头开始写模版：

使用最新的vue3版本v3.5.x。
所有使用的内部库全部生成ts类型并引入到环境中。
将所有的mixins重写，包装成组合式函数。
将以前的vue上的全局变量挂载到app.config.globalProperties。
全局变量申明类型到vue-runtime-core.d.ts中，方便使用。
全部使用setup语法，使用标签<script setup lang="ts">
使用pinia作为状态管理。

pinia使用

等等，pinia？好用吗？打开官方文档研究了下，官方优先推荐的是选项式API的写法。

调用defineStore方法，添加属性state, getters, actions等。

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Eduardo' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment () {
      this.count++
    },
  },
})

使用的时候，调用useCounterStore即可。

import { useCounterStore } from '@/stores/counter'
import { computed } from 'vue'

const store = useCounterStore()
setTimeout(() => {
  store.increment()
}, 1000)
const doubleValue = computed(() => store.doubleCount)

看上去还不错，但是我模版中全部用的是组合式写法，肯定要用组合式API，试着写了个demo，ref就是选项式写法中的state，computed就是选项式中的getters，function就是actions。

// useTime.ts
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import vueConfig from '../../../common/config/vueConfig'
import * as dayjs from 'dayjs'

export default defineStore('time', () => {
  const $this = vueConfig()
  const time = ref<number>()
  const timeFormat = computed(() => dayjs(time.value).format('YYYY-MM-DD HH:mm:ss'))
  const getSystemTime = async () => {
    const res = await $this?.$request.post('/system/time')
    time.value = Number(res.timestamp)
  }
  return { timeFormat, getSystemTime }
})

调用时解构赋值，就可以直接用了。

// index.vue
<script setup lang="ts">
import { onMounted } from 'vue'
import useTime from './use/useTime'

const { timeFormat, getSystemTime } = useTime()
onMounted(async () => {
  // 请求
  await getSystemTime()
  console.log('当前时间：', timeFormat)
})
</script>

优雅了很多，之前用vuex时还有个问题，storeA中的state、actions等，会在storeB中使用，这一点pinia文档也有说明，直接在storeB调用就好了，比如我想在另一个组件中调用上文中提到的timeFormat。

defineStore('count', () => {
  const count = ref<number>(0)
  const { timeFormat } = useTime()
  return {
    count,
    timeFormat,
  }
})

总结

经过我的努力，vue3又减少了一个库的使用，我就说不需要用pinia，不过放弃pinia也就意味着放弃了它自带的一些方法store.$state，store.$patch等等，这些方法实现很简单，很轻松就可以手写出来，如果你是这些方法的重度用户，保留pinia也没问题，如果你也想代码更加精简，赶紧尝试下组合式函数吧。