从vuex换到pinia的小感受

pinia === vuex5

一直以来都在用vuex,然后被社区的小伙伴们安利了pinia,刚开始也感觉很无所谓的,都是用一个插件,而且刚刚出来没很长时间不如vuex。最近闲来无事,就去看了看pinia的文档,这不看不知道一看吓一跳啊,那是真的比vuex省心多了。

这不阅读了官方文档后,我马上把一个小型的项目换成了pinia进行使用。感觉还是很不错的。

使用更简单业务代码减少

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
//业务文件
import { defineStore } from 'pinia'
import { removeLocalStore } from '@/utils/auth'
import { login, logout, wxLoginGetUserInfo } from '@/api/user'
import { Toast } from 'vant'

export const userMainStore = defineStore('main', {
  state: () => {
    return {
      token: '',
      userInfo: {}
    }
  },
  actions: {
    login(data) {
      return login(data).then(res => {
        this.token = res.data
        Toast.success('登陆成功')
      }).catch(err => {
        Toast.fail(err.message)
      })
    },
    logout() {
      logout().then(() => {
        this.token = ''
        this.userInfo = {}
        removeLocalStore()
        Toast.success('登出成功')
      }).catch(() => {
        Toast.fail('登出失败')
      })
    },
    getUserInfo() {
      return wxLoginGetUserInfo().then(res => {
        this.userInfo = res.data
      }).catch(() => {
        Toast.fail('登陆已过期')
      })
    }
  },
  // 数据持久化
  persist: {
    enabled: true,
    strategies: [
      {
        storage: localStorage,
        paths: ['token', 'userInfo']
      }
    ]
  }
})


有没有发现代码简洁了很多。没有了mutations,actions里面写不用写一堆commit进行state数据提交了,直接换成了this.xxx 我们最熟悉的写法了。

pinia的actions支持异步和同步,在也不用那么繁琐的写mutations和actionsl.

typescript支持

官网说:You don’t need to do much in order to make your state compatible with TS: make sure strict, or at the very least, noImplicitThis, are enabled and Pinia will infer the type of your state automatically! However, there are a few cases where you should give it a hand with some casting(说它对ts进行很多优化,帮大家做了很多事情)

至于为什么不写ts的例子,不是因为不会ts(也不是很会,写点业务可以),是因为我觉得ts不够cool,单人或者很少人一起开发的时候,有时候水平不一样会阻碍开发进度(解释这么多就是因为菜!!)

// 官网例子
export const useUserStore = defineStore('user', {
  state: () => {
    return {
      // for initially empty lists
      userList: [] as UserInfo[],
      // for data that is not yet loaded
      user: null as UserInfo | null,
    }
  },
})

interface UserInfo {
  name: string
  age: number
}

从vuex换到pinia的小感受》有2个想法

评论已关闭。