vue-pinia状态管理

vue学习

系列文章目录暂空
`

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

pinia作为vuex状态管理库的替代方案，其提供更简洁，符合vue3风格的API。它保留了vuex中的state、actions、getters三个概念。

---

一、安装pinia

如果使用create-vue框架来创建vue项目，可以简洁的来在项目中引入pinia.

但为了熟悉引入流程，我们先尝试手动引入。

1.下载pinia

使用我们使用包管理工具来下载pinia

yarn add pinia

或者使用 npm

npm install pinia

2.注册

我们需要在main.js文件中注册pinia

二、基础使用

1.定义store

我们想要使用pinnia存放数据，需要先创建一个store仓库，该操作要使用pinia中的defineStore函数完成。

import { defineStore } from 'pinia'

// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})

我们会在该函数的第二个参数中对该仓库的给个部分进行配置和定义。
并且我们在进行配置时可以使用vue2的选项式风格，也可以使用vue3的组合式风格。

1.1选项式风格

我们可以使用vue2的风格来自定义state、actions、getters三个部分。

state:存储的数据
actions:操控和设置state的方法
getters:获取state的方法

其格式如下：

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

1.2组合式风格

我们也可以使用vue3的风格来定义其中的数据和方法。
其格式如下：

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

  return { count, doubleCount, increment }
})

注意：使用组合式来进行仓库的配置时，需要在最后返回配置

2.使用数据

想要使用pinia中的数据，我们先要在组件中导入defineStore创建的对象，然后就可以使用该对象获取到其中的数据，如：

注意：这里直接用对象.属性或对象.方法来使用对应的属性和方法即可，不能对其进行解构操作（也不绝对，想要解构使用需要引入另一个方法，但这里就忽略，可以在想要时去查别的文章），否则会失去数据响应式的特点。

3.方法

pinia中的方法不再像vuex那样单独区分同步和异步方法。它们都统一定义在actions中。
想要使用异步方法时也直接定义即可：

---

总结

这篇文章简要介绍了pinia的基础使用，作为vue学习的内容之一，后续会进行补充更新。