pinia基本使用

目录

读state

state 

 写state

 方式一：【修改单个数据时推荐】

 方式二：$patch({})   【不推荐】

方式三：$patch((state)=>{})   【修改多个数据时推荐】

方式四：$state

 方式五：action  【修改多个数据时推荐】 

action

同步

异步

getters

内置api函数

$reset()

$subscribe

$onAction

---

下载：

npm i -S pinia

main.js中引入pinia： 

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

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

读state

import { defineStore } from "pinia";

export const useTestStore = defineStore('Test', {
    state: () => {
        return {
            user: '张三',
            age: 33
        }
    },
    getters: {
    },
    actions: {
    }
})

state 

 写state

 方式一：【修改单个数据时推荐】

 方式二：$patch({})   【不推荐】

方式三：$patch((state)=>{})   【修改多个数据时推荐】

方式四：$state

 方式五：action  【修改多个数据时推荐】 

state解构-storeToRefs

需要使用storeToRefs()才能是响应式

 

action

同步

异步

getters

内置api函数

$reset()

state重置为初始化状态

$subscribe

state中的值一改变就会触发

$onAction

$onAction函数接受一个回调函数，该回调函数内部的代码会先于actions函数调用前执行

 after钩子函数会在actions中的函数被调用后执行