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

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

前言

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

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

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

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

4edc953e2c684bbe819ffa954c899c08.png

关于 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

相关文章
|
1天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
6 2
|
1天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
7 3
|
1天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
11 2
|
1天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
8 2
|
7天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
22 1
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
8 2
|
1天前
|
JavaScript 网络架构
Vue中三个点(...)的意思
**孤立元素**:通过扩展运算符(`...`)可以将数组元素打印出来,如 `console.log(...iArray)`。 - **添加元素**:可以使用扩展运算符结合数组合并来添加元素,例如 `[&#39;0&#39;, ...iArray, &#39;4&#39;]` 或者使用 `push` 方法。 - **删除元素**:通过解构赋值取出数组第一个元素,如 `const [first, ...last] = arr`。 - **数组合并**:可以使用扩展运算符将多个数组合并,如 `[...arr1, ...arr2]`。
5 0
|
1天前
|
JavaScript 前端开发
vue filters过滤器传多个参数
这段内容展示了如何在HTML和JavaScript中使用过滤器(filter)。在HTML中,通过`{{变量 | 过滤器名(参数)}}`的方式传递参数给过滤器。在JavaScript中,定义过滤器函数并接收参数,如`filterAa(aa, bb, cc)`,其中`aa`, `bb`, `cc`分别代表过滤器接收到的第1至第3个参数。示例逐步演示了传1个、2个到3个参数给过滤器的过程。
9 1
|
1天前
|
JavaScript
vue知识点
vue知识点
8 3
|
2天前
|
JavaScript
vue数据的双向绑定
vue数据的双向绑定