Pinia的使用和插件扩展

Pinia 是什么？

Pinia 起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API 的 Vue 状态管理库。
类似 Vuex, 也是vue官方的状态管理工具，允许跨组件或页面共享状态（作者是 Vue 核心团队成员）。

在不同版本的 Vue 中，所使用的 Vuex 版本是不一样的。
Vue2 中需要使用 Vuex 3.x的版本，而在 Vue3 中需要使用 Vuex 4.x。
但是 Pinia 没有这个限制，无论是在 Vue2 中，还是在 Vue3 中均可以使用 Pinia，且不一定要与 Composition API 一起使用，API 的使用方式在两者中也是保持一致的。

Pinia 核心概念：
state: 状态
actions: 修改状态（包括同步和异步，pinia中没有mutations）
getters: 计算属性

回顾 Vuex

在Vue3中使用Vuex 4.x

省略安装和注册vuex

import {
    createStore } from 'vuex'

export default createStore({
   
  // 1、 存储所有全局数据
  state: {
   
     count: 100,
     num: 10,
     students: [{
    name: 'mjy', age: '18'}, {
    name: 'cjy', age: '22'}, {
    name: 'ajy', age: '21'}]
  },
  // 2、 需要通过计算获取state里的内容获取的数据
  // 只能读取不可修改
  getters: {
   
     more20stu (state) {
    return state.students.filter(item => item.age >= 20)}
  },
  //  3、定义对state的各种操作
  // vuex的store状态更新的唯一方式：提交 mutation 
  // 简单的直接赋值操作可以直接放到mutation里（同步操作）
  mutations: {
   
    increment (state) {
   
      state.count++
    },
    sum (state, num) {
   
     state.count += num
   }
  },
  // 4、定义对state的各种操作
  // 在action里写异步操作，需要在mutations里更新
  actions: {
   
  // context 上下文对象，可以理解为store
  // 通过 commit 触发 mution 中的方法
   sum_actions (context, num) {
   
     setTimeout(() => {
   
       context.commit('sum', num)  // 通过context去触发mutions中的sum
     }, 1000)
   }
  },
  // state中信息过长时
  // 用来将state进行分割
  // 如下，将state树分割出一个user state。
  // user.js 里面也有state/getters/mutation/actions/modules几部分
  modules: {
   
	user: ModuleUser,
  }
})

在组件中使用Store中的数据或方法

<template>
  <span>{
  {$store.state.count}}</span>
  <span>{
  {$store.state.num}}</span>
  <h2>{
  {$store.getters.more20stu}}</h2>
  <button @click="store.dispatch('sum_actions', num)"></button>
</template>

<script>
// 导入 useStore 函数
import {
      useStore } from 'vuex'
const store = useStore()
store.commit('increment')
</script>

Pinia 的使用

以Vue3+ts为例

安装

npm install pinia

引入（创建pinia实例）

// main.js
import {
    createApp } from 'vue'
import {
    createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

Store

🔶 什么是Store?

store简单来说就是数据仓库的意思，我们数据都放在store里面。当然你也可以把它理解为一个公共组件，只不过该公共组件只存放数据，这些数据我们其它所有的组件都能够访问且可以修改。

🔶 创建Store

我们需要使用pinia提供的defineStore()方法来创建一个store，该store用来存放我们需要全局使用的数据。

例：首先在项目src目录下新建store文件夹，用来存放我们创建的各种store，然后在该目录下新建user.ts文件，主要用来存放与user相关的store。

Option Store

defineStore 接收两个参数：
name: 模块的名称，一个字符串，必须是唯一的，多个模块不能重名，Pinia 会把所有的模块都挂载到根容器上。
option: 配置项，一个对象，里面的选项和 Vuex 差不多。
state 用来存储全局状态，它必须是箭头函数，为了在服务端渲染的时候避免交叉请求导致的数据状态污染所以只能是函数，而必须用箭头函数则为了更好的 TS 类型推导；
getters 就是用来封装计算属性；
actions 就是用来封装业务逻辑，修改 state。

// /src/store/user.ts
import {
    defineStore } from 'pinia'

// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
   
  // 其它配置项
    state: () => {
    return {
   } },
    getters: {
    },
    actions: {
    }