vue3.2 :使用 pinia
vue3.2 之 pinia 基础使用
- 下载
npm install pinia -S
- 引入 ( 这是 没有添加数据持久化的 )
const app = createApp(App)
// 使用 pinia
import { createPinia } from 'pinia'
const pinia = createPinia()
// 挂载
app.use(pinia)
store / modules / home.ts
import { defineStore } from 'pinia'
type UserInfo = {
name:String
age:Number
}
const changeUser = ():Promise<UserInfo> => {
return new Promise((resolve)=>{
setTimeout(()=>{
resolve({
name:"异步-ppp",
age: 100
})
},2000)
})
}
// defineStore() 参数1:唯一值;参数2:一个对象,里面有着3个模块 state状态数据、
export const useHomeStore = defineStore( {
id:'Home',
state:()=>{
return {
user:<UserInfo>{}
}
},
//类似于computed 可以帮我们去修饰我们的值
getters:{
},
//可以操作异步 和 同步提交state
actions:{
// 同步的形式 修改 User数据
setUser (payload:any) {
this.user = payload
},
// 异步修改
async asyncSetUser (){
const res = await changeUser()
this.user ={...res};
},
}
})
store / modules / base.ts
import { defineStore } from 'pinia'
type UserInfo = {
name:String
age:Number
}
const Login = ():Promise<UserInfo> => {
return new Promise((resolve)=>{
setTimeout(()=>{
resolve({
name:"异步-0001",
age:1000
})
},2000)
})
}
// 关于 base的 pinia 状态数据
export const useBaseStore = defineStore({
id:"Base",
state:()=>{
return {
baseName:"base-ppp",
userInfo:<UserInfo>{}
}
},
getters:{
},
actions:{
// 异步修改
async setUserInfo(){
const res = await Login()
this.userInfo = {...res};
}
}
})
使用 store 里面的模块
<!--
描述:
作者:xzl
时间:06月13日142250
-->
<template>
<div>
<div>
Home.user - {{ Home.user }} - userData -{{ userData }}
</div>
<button @click="onlyChangeHomeName">只是修改用户名</button>
<button @click="changeHomeName">修改Home模块的用户名</button>
<button @click="asyncChangeHomeName">异步修改数据</button>
<button @click="resetPinia">重置pinia中的state数据</button>
<div style="height:100px"></div>
<div>
Base - {{ Base.userInfo }} - baseName - {{ baseName }}
</div>
<button @click="changeBaseName">修改Base模块的baseName</button>
<button @click="changeBaseUserName">修改Base模块的userInfo</button>
</div>
</template>
<script setup lang="ts" >
import { reactive } from 'vue'; // 若是没有 使用自动导入的话,需要手动引入 ref等
import { useHomeStore } from './store/modules/home'
import { useBaseStore } from './store/modules/base'
import { storeToRefs } from 'pinia'
const Home = useHomeStore()
const Base = useBaseStore()
const { user } = storeToRefs(Home)
const { baseName } = storeToRefs(Base)
// console.log("baseName",baseName.value);
type UserInfo = {
name:String
age:Number
}
let userData = reactive<UserInfo>({
name:"ppp",
age:10
})
// 同步的形式 修改user 下的name数据
const onlyChangeHomeName = ()=> {
// Test.user.name = "pink" // 解构前修改
user.value.name = "pink" // 解构后 修改
}
// 同步的形式 修改user数据
const changeHomeName = ()=>{
Home.setUser({...userData}) // 同步的 调用
}
// 异步
const asyncChangeHomeName = ()=> {
Home.asyncSetUser() // 异步的 调用
}
// 重置
const resetPinia = ()=> {
Home.$reset() // 重置 pinia 中的 state状态数据(回到最初的数据)
}
// base模块的
const changeBaseName = ()=> {
baseName.value = "我是修改后的-name"
}
const changeBaseUserName = ()=> {
Base.setUserInfo() // 异步的 调用
}
</script >
<script lang="ts" >
export default {
name: 'App',
}
</script>
<style lang="scss" scoped>
</style>
效果
vue3.2 之 pinia 中getters的使用
基础使用getters与调用其他getters
store / modules / base.ts
import { defineStore } from 'pinia'
type UserInfo = {
name:String
age:Number
}
const Login = ():Promise<UserInfo> => {
return new Promise((resolve)=>{
setTimeout(()=>{
resolve({
name:"异步-0001",
age:1000
})
},2000)
})
}
// 关于 base的 pinia 状态数据
export const useBaseStore = defineStore({
id:"Base",
state:()=>{
return {
baseName:"base-ppp",
userInfo:<UserInfo>{},
count:0
}
},
getters:{
// 传入 state [可选参数]的形式
// countSum(state){
// return state.count 1
// }
// 使用 this的形式
countSum():number {
return this.count 1
},
countSum2():number {
return this.countSum 1
},
},
actions:{
// 异步修改
async setUserInfo(){
const res = await Login()
this.userInfo = {...res};
}
}
})
使用
<div>
count - {{ count }} - countSum - {{ Base.countSum }}; countSum2- {{ Base.countSum2}}
</div>
<button @click="addCount">修改Base模块的count</button>
import { reactive } from 'vue'; // 若是没有 使用自动导入的话,需要手动引入 ref等
import { useBaseStore } from './store/modules/base'
const Base = useBaseStore()
const { count } = storeToRefs(Base)
const addCount = ()=> {
count.value = 1
}
效果
pinia数据持久化
使用插件
- 下载
npm i pinia-plugin-persist --save
- 引入 main.ts
const app = createApp(App)
// 使用 pinia
import { createPinia } from 'pinia'
// 持久化存储pinia
import piniaPluginPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPluginPersist)
app.use(pinia)
- store / modules / base.ts
import { defineStore } from 'pinia'
type UserInfo = {
name:String
age:Number
}
const Login = ():Promise<UserInfo> => {
return new Promise((resolve)=>{
setTimeout(()=>{
resolve({
name:"异步-0001",
age:1000
})
},2000)
})
}
// 关于 base的 pinia 状态数据
export const useBaseStore = defineStore({
id:"Base",
state:()=>{
return {
baseName:"base-ppp",
userInfo:<UserInfo>{},
count:0
}
},
getters:{
// 传入 state [可选参数]的形式
// countSum(state){
// return state.count 1
// }
// 使用 this的形式
countSum():number {
return this.count 1
},
countSum2():number {
return this.countSum 1
},
},
actions:{
// 异步修改
async setUserInfo(){
const res = await Login()
this.userInfo = {...res};
}
},
persist: {
enabled: true,
// 自定义持久化参数
strategies: [
{
// 自定义key
key: 'base_store',
// 自定义存储方式,默认sessionStorage
// storage: localStorage,
// 指定要持久化的数据,默认所有 state 都会进行缓存,可以通过 paths 指定要持久化的字段,其他的则不会进行持久化。
paths: ['count'],
}
]
},
})
- 使用
<!--
描述:
作者:xzl
时间:06月13日142250
-->
<template>
<div>
<div>
Base - {{ Base.userInfo }} - baseName - {{ baseName }} ;
count - {{ count }} - countSum - {{ Base.countSum }}; countSum2- {{ Base.countSum2}}
</div>
<button @click="changeBaseName">修改Base模块的baseName</button>
<button @click="changeBaseUserName">修改Base模块的userInfo</button>
<button @click="addCount">修改Base模块的count</button>
</div>
</template>
<script setup lang="ts" >
import { reactive } from 'vue'; // 若是没有 使用自动导入的话,需要手动引入 ref等
import { useBaseStore } from './store/modules/base'
import { storeToRefs } from 'pinia'
const Base = useBaseStore()
const { baseName,count } = storeToRefs(Base)
// base模块的
const changeBaseName = ()=> {
baseName.value = "我是修改后的-name"
}
const changeBaseUserName = ()=> {
Base.setUserInfo() // 异步的 调用
}
const addCount = ()=> {
count.value = 1
}
</script>
<script lang="ts" >
export default {
name: 'App',
}
</script>
<style lang="scss" scoped>
</style>
- 效果
手写 - 数据持久化
- [pinia数据持久化](https://blog.csdn.net/weixin_43845137/article/details/123620334)
pinia 的模块化 (标准写法-推荐)
store / index.ts
import useAppStore from './modules/app'
import useHomeStore from './modules/home'
const useStore = () => ({
app: useAppStore(),
home: useHomeStore()
})
export default useStore
store / modules / app.ts
import { AppState } from '@/types/store/app'
import { defineStore } from 'pinia'
const useAppStore = defineStore({
id: 'app',
state: (): AppState => ({
count: 0
}),
actions: {
addCount(payload: number) {
this.count = payload
}
}
})
export default useAppStore
store / modules / home.ts
import { AppState } from '@/types/store/app'
import { defineStore } from 'pinia'
const useHomeStore = defineStore({
id: 'home',
state: (): AppState => ({
homeStr: "homeStr",
}),
actions: {
changeHomeStr( payload : string) {
this.homeStr = payload
}
}
})
export default useHomeStore
types / store
- 对store的类型做限制
types / store / app.d.ts
/**
* 系统类型声明
*/
export interface AppState {
device: string;
count: [number,string];
sidebar: {
opened: boolean;
withoutAnimation: boolean;
};
language: string;
size: string;
}
types / store / home.d.ts
/**
* 系统类型声明
*/
export interface AppState {
homeStr: string;
}
使用
<template>
<section class="a">
<div>appCount - {{ appCount }}</div>
<div>homeStr - {{ homeStr }}</div>
<el-button type="primary" @click="btn">Primary</el-button>
</section>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import useStore from '@/store'
const { app, home } = useStore() as any // 拿到 store的数据
const appCount = computed(() => app.count)
const homeStr = computed(() => home.homeStr)
const btn = () => {
app.addCount(10)
home.changeHomeStr("我是hh")
}
</script>
<style></style>
vue3.2 之 pinia 在 .ts文件使用
import useStore from './stores/index.ts'
const store = useStore()
store.user.menuTree // 拿 store 之中 user模块的数据
store.user.GET_USER_INFO(hasToken) // 调用 store 之中 user 模块的actions
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgghgke
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01