位置: IT常识 - 正文
推荐整理分享vue下一代状态管理Pinia.js 保证你看的明明白白!(vue状态机),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:vue中的状态管理,vue状态管理相关的面试题,vue状态码,vue状态管理相关的面试题,vue的状态改变方式,vue中的状态管理,vue中的状态管理,vue3状态管理,内容如对您有帮助,希望把文章链接给更多的朋友!
获取store中值的第二种方法-computed<template> <div class="pinia"> <h2> 学习pinia </h2> <div>姓名:{{useStoreName}}</div> <div>性别:{{useStoreSex}}</div> </div></template><script setup lang='ts'>// 引入store中暴露出去的方法import { computed } from 'vue'import { useUserStore } from '../../store/user'const userStore = useUserStore()// 使用 computed取获取值const useStoreName = computed(() => userStore.name)const useStoreSex = computed(() => userStore.sex)</script>提出问题如果对象上有多个属性,可以进行结构吗?可以的!使用 pinia 提供的 storeToRefs我们来看下怎去使用5.pinia 提供的 storeToRefs进行结构<template> <div class="pinia"> <h2> 学习pinia </h2> <div>姓名:{{ asName }}</div> <div>性别:{{ mysex }}</div> <div>工作:{{ work }}</div> <div>身高:{{ heigt }}</div> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'import { useUserStore } from '../../store/user'const userStore = useUserStore()// asName 和 mysex 是我取的别名const { name : asName ,sex:mysex, work, heigt } = storeToRefs(userStore)</script>6.如何修改 state 中的数据修改 state 中的数据,可以通过 actions 下的方法。然后调用 updataName 就可以取修改 state中的name值了//src/store/user.ts 文件import { defineStore } from 'pinia'export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { name: '于途', likelist:[], sex:'男', work:'写代码', heigt:'1.70cm' } }, // actions 可以修改state中的值,这里面提供方法 actions:{ // 修改name中的数据 updataName(name:string){ this.name=name }, },})调用方法,修改state中的name<template> <div class="pinia"> <h2> 学习pinia </h2> <div>姓名:{{ asName }}</div> <div>性别:{{ mysex }}</div> <div>工作:{{ work }}</div> <div>身高:{{ heigt }}</div> <el-button type="primary" @click="changeHander">修改name</el-button> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'import { useUserStore } from '../../store/user'const userStore = useUserStore()// asName 和 mysex 是我取的别名const { name : asName ,sex:mysex, work, heigt } = storeToRefs(userStore)const changeHander=()=>{ userStore.updataName('小玉兔') // 这样我发现也可以,但是不推荐这样使用。 // 统一通过 actions 中的方法去修改值 userStore.work='我换工作了'}</script>7.getters的使用//src/store/user.ts 文件import { defineStore } from 'pinia'export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { name: '于途', likelist:[], sex:'男', work:'写代码', heigt:'1.70cm', age:26, } }, // actions 可以修改state中的值,这里面提供方法 actions:{ // 修改name中的数据 updataName(name:string){ this.name=name }, }, // Getter 完全等同于 Store 状态的计算值 getters:{ // 将姓名进行更改 getName: (state) => { return state.name + 'hahha~!' } }})//使用的页面.vue<template> <div class="pinia"> <h2> 学习pinia </h2> <div>姓名:{{ asName }}</div> <div>性别:{{ mysex }}</div> <div>工作:{{ work }}</div> <div>身高:{{ heigt }}</div> <div>身高:{{ age }}</div> <!-- 这里就直接使用了getters中的方法 --> 姓名:{{ userStore.getName }} <el-button type="primary" @click="changeHander">修改name</el-button> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'import { useUserStore } from '../../store/user'const userStore = useUserStore()// asName 和 mysex 是我取的别名const { name : asName ,sex:mysex, work, heigt,age } = storeToRefs(userStore)const changeHander=()=>{ userStore.updataName('小玉兔')}</script>对于getters的使用的说明Getter 完全等同于 Store 状态的计算值 computed.并不会影响原始数据9.异步actions-设置state中的值//src/store/user.ts 文件import { defineStore } from 'pinia'// 引入接口import { getUser } from "../https/api";export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { name: '于途', likelist:[], } }, // actions 可以修改state中的值,这里面提供方法 actions:{ // 修改name中的数据 同步 updataName(name:string){ this.name=name }, // 异步-获取远端的数据 loadUserList(){ getUser({}).then(res=>{ this.likelist = res }) } // 使用await和async 第二种方法 // async loadUserList(){ // const list = await getUser({}) // console.log('list',list) // this.likelist = list // } },})使用的页面<template> <div class="pinia"> <h2> 学习pinia </h2> 数据 {{ userStore.likelist}} <el-button type="primary" @click="changeHander">获取远端数据</el-button> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'import { useUserStore } from '../../store/user'const userStore = useUserStore()const changeHander=()=>{ // 异步调用 userStore.loadUserList() // 加载所有数据}10.actions 中互相调用方法很多时候,我们可能会出现 actions中互相去调用方法。这个时候怎么去处理呢? 通过this.方法名(参数)//src/store/user.ts 文件import { defineStore } from 'pinia'// 引入接口import { getUser } from "../https/api";export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { name: '于途', likelist:[], } }, // actions 可以修改state中的值,这里面提供方法 actions:{ // 修改name中的数据 同步 updataName(name:string){ this.name=name }, // 异步-获取远端的数据 loadUserList(){ getUser({}).then(res=>{ this.likelist = res this.sayHi('互相调用方法') }) }, sayHi(mess:string){ console.log('loadUserList方法中调用了sayHi',mess) } },})使用的页面.vue<template> <div class="pinia"> <h2> 学习pinia </h2> 数据 {{ userStore.likelist}} <el-button type="primary" @click="changeHander">获取远端数据</el-button> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'import { useUserStore } from '../../store/user'const userStore = useUserStore()const changeHander=()=>{ // 异步调用 userStore.loadUserList() // 加载所有数据}</script>11.数据持久化-sessionStorage 或 localStorage我们都知道,vuex刷新后,数据会丢失。这个时候我们需要将数据进行持久化。我们可以考虑sessionStorage或者localStorage//src/store/user.ts 文件import { defineStore } from 'pinia'// 引入接口import { getUser } from "../https/api";export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { // 数据持久化使用的是sessionStorage name: sessionStorage.getItem('name') ? sessionStorage.getItem('name') : '于途', likelist:[], } }, actions:{ // 修改name中的数据 同步 updataName(name:string){ sessionStorage.setItem('name', name) this.name=name }, },})<template> <div class="pinia"> <h2> 学习pinia </h2> 姓名 {{ userStore.name}} <el-button type="primary" @click="changeHander">该变值</el-button> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'import { useUserStore } from '../../store/user'const userStore = useUserStore()const changeHander=()=>{ // 异步调用 userStore.updataName('我改变了姓名') }</script>12.跨模块修改数据虽然我不建议跨模块修改数据。因为这样可能会导致你的应用数据流向变得难以理解。但是有些时候确实需要跨模块修改数据。那么pinia怎么去处理跨模块修数据呢?下面我们一起来探索跨模块修改数据!假设admin模块需要去修改user模块中的数据admin.ts代码如下//src/store/admin.ts 文件import { defineStore } from 'pinia'// 引入user模块import { useUserStore } from './user'export const adminUserStore = defineStore({ id: 'adminkey', actions:{ // 通过引入的useUserStore模块,然后去触发它里面对应的方法。 editUserModuleValue(name:string){ // userStore可以看见整个user模块中的数据和方法 let userStore=useUserStore() console.log('userStore',userStore) userStore.updataName(name) } },})user.ts代码//src/store/user.ts 文件import { defineStore } from 'pinia'// 引入接口export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { name: '于途', likelist:[], sex:'男', work:'写代码', heigt:'1.70cm' } }, actions:{ // 修改name中的数据 同步 updataName(name:string){ this.name=name }, },})页面的使用<template> <div class="pinia"> <h2> 学习pinia </h2> 姓名 {{ userStore.name}} <el-button type="primary" @click="changeHander">该变值</el-button> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'// 引入admin模块import { adminUserStore } from '../../store/admin'// 引入user模块import { useUserStore } from '../../store/user'const adminStore = adminUserStore()const userStore = useUserStore()// dmin模块需要去修改user模块中的数据const changeHander=()=>{ adminStore.editUserModuleValue('数据数据')}</script>尾声如果你觉得我写的不错的话,可以给我推荐、打赏、评论!上一个给我打赏的小伙伴都已经找到女朋友了!咦!你不信,不信你给我打赏看一下!保准你追到到喜欢的Ta!你不会追,哎!难受。我教你,你可以这样说:小生不才,斗胆-问,不知姑娘是否心系他人。感情之事,在下不敢儿戏!如若姑娘早已心系他人。那在下便不再打扰。如若有所唐突还望姑娘多加体谅!若姑娘非我良人,那在下就不庸人自恼。在下怕越陷越深,还望姑娘尽早告知!话已至此,我便先在此谢过!拿去不谢!回头告诉我结果啊!咦!抓住一个没有打赏的小伙伴!下一篇:vue大型电商项目尚品汇(前台篇)day02(vue大型项目架构设计)
友情链接: 武汉网站建设