Pinia——State

文章目录

什么是 State
重置状态
改变状态
替换 state
订阅状态
在 pinia 实例上查看整个状态

什么是 State

在 Pinia 中，状态被定义为返回初始状态的函数，可以通过 store 实例访问状态来直接读取和写入状态

重置状态

// 通过调用 store 上的 $reset() 方法将状态重置到其初始值// 实例化 store
const store = useStore();// 重置
store.$reset();

上一个笔记的基本使用 store ，都是在 setup() 钩子中使用，优点很明显，简单方便
但是如果不使用 Composition API，并且使用的是 computed、methods。则可以使用 mapState() 帮助器将状态属性映射为只读计算属性

import { mapState } from 'pinia';
import { useCounterStore } from '../stores/counterStore';export default {computed:{// 允许访问组件内部的 this.cunter，与从 store.counter 读取相同...mapState('useCounterStore',{myOwnName:'counter',// 可以是一个访问 store 的函数double: store => store.counter * 2 // 函数中可以正常读取 thismagicValue(store) {return store.counter + this.counter + this.double            }       })                    }
}

如果希望能够写入这些状态的属性，可以使用 mapWritableState() 代替

import { mapWritableState } from 'pinia'
import { useCounterStore } from '../stores/counterStore'export default {computed: {// 允许访问组件内的 this.counter 并允许设置它与从 store.counter 读取相同...mapWritableState(useCounterStore, ['counter'])// 与上面相同，但将其注册为 this.myOwnName...mapWritableState(useCounterStore, {myOwnName: 'counter',}),},
}

改变状态

// 第一种改变状态的方法
const clickHandle=()=>{store.count++;store.text=store.count%2!==0?'hello! pinia':'pinia'
}// 第二种方法 $patch
const patchClickHandle=()=>{store.$patch({count:store.count+2,text:store.text==='pinia'?'hello! pinia':'pinia'})
}// 第三种方法 $patch 传递函数
const patchMethodClickHandle=()=>{store.$patch((state)=>{store.count++;store.text=store.count%2!==0?'hello! pinia':'pinia'})
}// 第四种方法 actions
// store/index.ts
actions:{// 不是箭头函数，普通函数changeState(){this.count++;this.text=this.count%2!==0?'hello! pinia':'pinia'}
}const actionClickHandle=()=>{store.changeState()
}

替换 state

可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态：

store.$state = { name:'Y' }

还可以通过更改 pinia 实例的 state 来替换应用程序的整个状态，这在 SSR for hydration 期间使用

pinia.state.value = {}

订阅状态

可以通过 store 的 $subscribe() 方法查看状态及其变化。与常规的 watch() 相比，使用 $subscribe() 的优点是 subscriptions 只会在 patches 之后触发一次

// 默认情况下，state subscriptions 绑定到添加它们的组件（如果 store 位于组件的 setup() 中）。
// 意思是，当组件被卸载时，它们将被自动删除。 如果要在卸载组件后保留它们，请将 { detached: true } 作为第二个参数传递给 detach 当前组件的 state subscription：export default {setup() {const someStore = useSomeStore()// 此订阅将在组件卸载后保留someStore.$subscribe(callback, { detached: true })// ...},
}

在 pinia 实例上查看整个状态

watch(pinia.state,(state) => {// 每当它发生变化时，将整个状态持久化到本地存储localStorage.setItem('piniaState', JSON.stringify(state))},{ deep: true }
)

Pinia——State相关推荐

pinia中文文档指导文档中文翻译版 pinia指导中文翻译
Pinia 指导文档中文翻译版翻译者:jcLee95 Pinia 指导手册中文翻译地址(本文): https://blog.csdn.net/qq_28550263/article/det ...
pinia 的使用（三）—— actions
文章目录 1.状态操作 actions ① 状态更新 ② 重置状态 $reset ③ 跨容器调用 ④ actions 的操作 ⑤ 注意点 1.状态操作 actions actions 可以通过完全输入 ...
Pinia基本使用与源码分析-手动实现部分主要功能
基本使用在main.js中注册pinia import { Vue,createApp } from 'vue' import App from './App' const app = create ...
教你使用 koa2 + vite + ts + vue3 + pinia 构建前端 SSR 企业级项目
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言大家好,我是易[1],在上一篇文章中,我们有讲到<如何使用 vite+vue3 ...
Pinia 详细教程
来源 Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态. Pinia (发音为 /piːnjʌ/,类似英文中的 "peenya") 是最接近有效包名 piña ...
vue3的pinia详解
引入pinia 安装pinia cnpm install pinia --save main.js import {createPinia} from "pinia"const p ...
还有人没尝过 Pinia 吗，请收下这份食用指南！
前言 Pinia ,发音为 /piːnjʌ/,来源于西班牙语 piña .意思为菠萝,表示与菠萝一样,由很多小块组成.在 Pinia 中,每个 Store 都是单独存在,一同进行状态管理. Pinia ...
什么是Pinia？以及它的使用方式？以及和Vuex的区别是什么？
文章目录概要什么是Pinia? Pinia和Vuex的区别? Pinia相比于Vuex的优势? 为什么要使用Pinia? Pinia的简单使用安装(仅限于Vue3) 使用概要提示:下边是Pi ...
vue3 + vite + ts + pinia + yarn
Vue3 + Vite + TypeScript + Pinia + Yarn yarn 常用命令 vite 构建工具 vite 创建项目 Vue 3 vue 3 组件库 vue 文档组合式 API ...