持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天，点击查看活动详情

一、前言

最近在学习vue3相关api，那又怎么能少得了大菠萝pinia呢，本文就带大家了解一下这个被尤大极力推荐的vuex代替者----pinia

二、pinia

1、pinia的优势

vue2、3通吃

抛弃传统的 Mutation ，只有 state, getter 和 action ，简化状态管理库

不需要嵌套模块，符合 Vue3 的 Composition api，让代码扁平化

支持TypeScript

代码简洁

2、pinia的使用

第一步下载

npm i pinia

第二步挂载

这里我们选择全局挂载

在main.ts里，引入大菠萝的createPinia函数，挂载到我们的#app上

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')

第三步撰写存储文件

在store文件夹下，创建index.ts文件，在引入defineStore方法后，我们就可以创建一个名为USER的存储变量了，在state里定义好变量的结构，在getters和actions里，编写方法，对数据进行操控。

import {defineStore} from 'pinia'
export const useUserStore = defineStore("USER",{
    state() {
        return {
            name: 'sanwu',
            age: 18,
            id: 2,
            num: 4
        }
    },
    // 和vuex一样
    getters: {

    },
    // 和vuex一样
    actions: {
        setNum(data:number) {
            this.num = data
        }
    }
})

第四步在组件中使用

这里一共有三种常用读取方式，五种常用修改值的方式，还提供了重置方法，下面我一一来举例。

（1）读取方式

第一种通过useUserStore，直接获取store的值，这里的是响应式的

import { useUserStore } from '../store'
// 直接获取store中的值
const User = useUserStore()

可以直接这样子读取到页面里的数值

<div>1、直接读取<span style="color:red"> {{ User.name }}-{{ User.age }}-{{ User.id }}-{{ User.num }}</span></div>

第二种，通过es6的解构取值，但这样子取到的值不是响应式的，需要注意一下。

// ese6结构取值，非响应式
const { age } = User

同样的使用方法

<div>2、es6结构取值，非响应式<span style="color:red"> {{ age }}</span></div>

第三种，通过pinia自带的方法，storeToRefs，将解构取值转换成ref响应式

import { storeToRefs } from 'pinia'
// pinia自带方法，
const { id, num } = storeToRefs(User)

同样可以在页面里直接调用

  <div>3、pinia自带方式，转换成ref，响应式 <span style="color:red"> {{ id }}-{{ num }}</span></div>

（2）修改存储的方式

第一种，直接修改，我们可以直接对User里的数据进行修改操控，让age每次都增量2

function changeOne () {
  User.age += 2
}

第二种，以对象的形式，一次修改多个值，我们借助patch方法，按对象的格式修改User里的值，name修改为sanwuDemo，id修改为44

function changeTwo () {
  User.$patch({
    name: 'sanwuDemo',
    id: 44
  })
}

第三种，以函数的形式，一次修改多个值，还是借助patch方法，但这次我们以函数的形式来，name修改为sanwuDemo-state，id还是44

function changeThree () {
  User.$patch((state) => {
    state.name = 'sanwuDemo-state'
    state.id = 44
  })
}

第四种，通过$state重定义新的User，这种方法必须全部传值，不能像前三种，仅传要修改的值。

function changeFour () {
  User.$state = {
    name: 'sanwuState',
    age: 333,
    id: 2,
    num: 4
  }
}

第五种，通过actions来修改值，我们之前在index.ts的actions里定义了setNum函数，作用是设置变量的num为传过来的值。这种用法和vuex基本相同

function changeFive () {
  User.setNum(233)
}

（3）重置的方法

官方还提供了reset方法，来让User变量恢复初始状态。

function reset () {
  User.$reset()
}

3、pinia的使用效果

可以看到，每种方式都能修改到值，除了第二种的非响应式，其他都有同步做出修改。

三、小结

pinia相比vuex来说，确实是扁平了不少，操作起来更加方便了。

ps: 我是地霊殿__三無

大菠萝Pinia