提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

感受 Vue 新的状态管理工具之美之 Pinia---学习篇

Vue状态学习管理工具 之美 --- 感受 Pinia
2023-06-13 09:14:13 时间

前言

相信在Vue中提到状态管理，大家一定会想到 Vuex。的确 Vuex确实是比较强大的，但Vuex 多少有点重，而且对 Typescript的支持也不是那么的友好，同时门槛也比较高，学习成本比较大。

基于以上种种原因，随着 Pinia 的不断完善 也渐渐的进入到小伙伴的视野中，今天就同大家一起学习一下 Pinia 的优美之处。

Pinia 始于 2019年11月， 让人比较心动的事，Pinia 同时支持 Vue2 和 Vue3 这一点可以说是很良心的。当然，由于VueAdminWork中Vue3的版本比较多，我们下面只介绍一下在 Vue3 中的用法。

和 Vuex 差不多的事，Pinia 的 store 也同样有 `state` `actions` `getters` 的这些概念，但比 Vuex 更加简洁的是没有 `mutations`，这一点个人觉得很赞。

关于 pinia 打算分以下几个篇章讲一下

  • 学习篇
  • state篇
  • getters篇
  • actions篇
  • 持久化篇
  • 源码解析篇

基本概念

  • 引入并使用pinia

引入

yarn add pinia
# or with npm
npm install pinia

使用（Vue3中的用法）

import { createPinia } from 'pinia'
app.use(createPinia())
  • store

定义一个 store 很简单

import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
  state: () => {
    return {}
  },
  actions: {},
  getters: {}
})

这里注意的是 第一个参数是必须要有的，并且是独一无二的，这将是一个 store 的唯一标识。

使用起来也比较方便

import { useStore } from '@/stores/counter'
export default {
  setup() {
    const store = useStore()
    return {
      store,
    }
  },
}
  • state

pinia 中的 state 也比较好理解，但有一点值得注意的是，state 需要是一个 函数 的类型，而且要返回一个 初始对象，这类似于Vue中 data() 方法。

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
})

访问 state中的属性，用法比较简单

const store = useStore()
store.counter++

重置 state

const store = useStore()
store.$reset()

和Vuex一样，pinia 同样也提供了 mapXXX 函数方便大家使用，在这里就不过多介绍了，感兴趣的同学可以去官网查看。

state 还有其它更加高级的用法，这篇文章先不介绍那么多了，下一篇具体看个例子介绍。

  • actions

按官网的介绍：actions 等于 组件中的 methods ，里面可以定义很多业务逻辑的方法。

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random())
    },
  },
})

但有一个地方非常点赞的是，actions里面的方法支持 异步。

actions: {
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // let the form component display the error
        return error
      }
    },
  }

使用起来也比较方便

export default defineComponent({
  setup() {
    const main = useMainStore()
    main.randomizeCounter()
    return {}
  },
})
  • getters

getters 等于 组件中 computed ，用法也很简单

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})

用起来和 computed 里面的属性一样：

<template>
  <p>Double count is {{ store.doubleCount }}</p>
</template>
<script>
export default {
  setup() {
    const store = useStore()
    return { store }
  },
}
</script>

以上便是对 pinia 的几个重要概念简单介绍，比较简单，大家先入门，后面我们一步步认识 pinia

相关文章