前端基础之《Vue（30）—Vue3 Pinia状态管理》

一、pinia简介

1、pinia是vuex的下一版本，在vue2和vue3中都能用
2、pinia支持多store开发，可以非常自由的组织“状态管理”的数据流逻辑
3、pinia对hooks编程思想非常友好，它对ts也非常友好

二、安装

1、命令

cnpm install pinia

2、main.ts引入pinia

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

三、pinia的store开发

1、建立src/store/useCnodeStore.ts

import { defineStore } from 'pinia'

// 强调：pinia要求定义store时，名称以use*开头
const useCnodeStore = defineStore('cnode', {
    // 这里的state，只能使用工厂函数写法
    state: () => {
        return {
            num: 1
        }
    },
    getters: {},
    actions: {
        addNum () {
            this.num++
        }
    }
})

export default useCnodeStore

2、页面使用

<template>
    <div>
        <h1>页面S</h1>
        <h1 v-text='store.num'></h1>
        <button @click='add2'>自增</button>
    </div>
</template>

<script setup>
    import useCnodeStore from '@/store/useCnodeStore'
    const store = useCnodeStore()
    console.log('---store', store)

    // 修改pinia中的数据（方法一：直接改）
    const add = () => {
        store.$patch({num: store.num+1})
    }

    // 修改pinia中的数据（方法二：使用actions中的方法）
    const add2 = () => {
        store.addNum()
    }
</script>

3、修改pinia中的数据
方法一：直接改
方法二：使用actions中的方法

4、如果解构store中的变量会失去响应式，要用ref包一层
例子：

import { storeToRefs } from 'pinia'
import useCnodeStore from '@/store/useCnodeStore'
const store = useCnodeStore()
const { num } = storeToRefs(useCnodeStore)