Pinia思维导图

U285753081

2024-12-18

浏览量: 78

用法

计算属性

批量修改

Pinia功能详述

树图思维导图提供《Pinia》在线思维导图免费制作，点击“编辑”按钮，可对《Pinia》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：cca1900ea7941162b9651155cac341d6

思维导图大纲

安装注册使用

安装

npm install pinia -S

import {createApp} from 'vue' import App from './App.vue' import {createPinia} from 'pinia' const store = createPinia() let app = createApp(App) app.use(store) app.mount('#app')

初始化

1.新建文件夹src/Store

2.新建文件src/Store/index.ts

3.定义仓库Store

import {defineStore} from 'pinia' export const useTest = defineStore(‘name', { state: () => ( { current: 1} ), getters: { }, actions: { } })

使用

<template> <div>{{ Test.current }}</div> </template> <script setup> import {useTest} from './store' const Test = useTest() </script>

选项

state

必须是一个工厂函数，返回一个对象

import {defineStore} from 'pinia' export const useTest = defineStore({ state: () => { return { age: 1, name: 'Tom' } } })

修改

组件中直接修改

Test.age++

$patch

批量修改state中的属性

接收对象

Test.$patch({ age: 2 })

接收工厂函数

函数参数state为store中的state

Test.$patch((state) => { state.age= 3 })

$state

必须修改全部state中的属性

Test.$state = { age: 4, name: 'Jerry' }

actions

store/index.js

actions: { setAge (num) { this.age = num } }

组件中

Test.setAge( 5 )

解构

使用解构语法会失去响应式

let { name, age } = Test

storeToRefs()

让解构后的store具有响应式

import {storeToRefs} from 'pinia' import useTest from './store' const Test = useTest() let { name, age } = storeToRefs(Test) age++

getters

特性

state的计算属性

里面的this指向当前store实例，可以访问到state、getters、actions中的属性

要让this指向store实例，不能写成箭头函数

用法

getters: { getNewName() { return this.name + ’先生' } getUser() { return `$[this.getNewName}--${this.age}` } }

actions

特性

可以处理同步或异步逻辑

里面的this指向当前store实例，可以访问到state、getters、actions中的属性

要让this指向store实例，不能写成箭头函数

用法

actions: { setName() { this.name = 'Tony' this.setAge() }, setAge() { this.age = 20 } async setUser () { let res = await Promise.resolve({name: 'Merry', age: 30}) this.user = res } }