前言

目标

  1. 为什么要使用Pinia？
  2. 如何创建和引入Pinia
  3. 掌握Pinia的使用方法
graph LR
A[Pinia] --> B[1 为什么你应该使用 Pinia]
A --> C[2 pinia的引入与使用]
A --> D[3 用pinia创建购物车]

1 为什么你应该使用 Pinia？

Pinia的诞生 起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API的 Vue 状态管理库。 是VueX的作者尝试重新设计store，旨在为下一次的更新迭代做测试。 Vue3.x版本与Vuex4.x版本结合的并不好，而Pinia与Vue3.x同用组合式Api将以上问题很好地解决了。

特征与优势

  • 极其轻巧（1kb）
  • 完整的Ts支持
  • 代码简洁，去除了mutations 不再有模块嵌套和命名空间
  • actions 支持异步和同步
  • 能构建多个stores，并实现自动的代码拆分
  • Devtools 支持
  • 支持服务端渲染

2 pinia的创建与引入

环境：Vue3.x、TS、Node18.12.1

安装pinia

npm i pinia

创建一个 pinia 实例 (根 store) 并将其传递给应用

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

2.1 state的创建和调用

创建一个store文件夹，根据需求分模块

引入defineStore

import {defineStore} from 'pinia'

创建state

export const useAlertsStore = defineStore('alerts', {
    state:()=> ({
        name: '张三',
        count:0
    }),
    getters: {},
    actions: {},
  })

使用state

<script setup lang="ts">
  // 引入创建的store
  import {useAlertsStore} from '../store'
  import {storeToRefs} from 'pinia'
  const alertStore= useAlertsStore() // 获取store
  const {count,name} = storeToRefs(alertStore)
  defineProps<{ msg: string }>()
</script>
<template>
  <h2>{{ name }}</h2>
  <div>Count is : {{ count }}</div>
</template>

补充说明：storeToRefs 在js中我们经常用{count,name} = alertStore这种形式来结构，在TS这种方式解构的属性是非响应式的 用storeToRefs解构的是响应式数据

2.2 getters的使用

类似于计算属性 创建

export const useAlertsStore = defineStore('alerts', {
    // 其他配置...
    state:()=> ({
        name: 'alerts',
        count:0
    }),
    getters: {
        doubleCount: (state) => state.count * 2,
        trackCount():number {
            return this.doubleCount+1
        }
    },
})

使用

<template>
  <h2>Count的两倍：{{ alertStore.doubleCount }}</h2>
  <h2>Count的两倍+1：{{ alertStore.trackCount }}</h2>
  <button @click="increment">++</button>
</template>

在这里插入图片描述

2.3 actions的使用

创建一个actions方法

 actions: {
        change() {
            this.count+=2
            this.name = 'hello 张三' 
        },
    },

使用

 <button @click="alertStore.change()">++</button>

在这里插入图片描述

2.4 改变属性值的方法

1 直接改变属性值

const alertStore = useAlertsStore()
const {count,name} = storeToRefs(alertStore)
const increment = ()=>{
    count.value++
}

2 通过$patch改变

const increment = ()=>{
  alertStore.$patch({
    count:count.value+1,
    name:'Hello World'
  })
}

3 通过actions中的方法

const increment = ()=>{
  alertStore.change()
}

参考链接: pinia文档