pinia中数据解构

hykeda4年前Vue4071

在vuex中获取state中的数据可以解构的方式如下:

import { mapState,mapMutations } from "vuex"
computed:{
    ...mapState(['userInfo']),
},

代码中可以直接使用userInfo了

在pinia中如果类似的进行解构:

import { useTestStore } from './store'
const Test = useTestStore()
const { current, name } = Test

如进行这样的解构,解构出来的current和name不是响应性的,无法进行动态的修改

应该使用 storeToRefs 进行解构处理

import { storeToRefs } from 'pinia'
 
const Test = useTestStore()
 
const { current, name } = storeToRefs(Test)


这样机构出来的state变量是具有响应性的,可以随意使用。

相关文章

[Vue warn]: Error in render: “TypeError: Cannot read property ‘name‘ of undefined“,报错,已解决。

含义:渲染时发生错误:类型错误:不能读取undefined的name属性原因:出现上述报错其实是因为,你访问了undefined.name,但是 undefined 没有 name,所以报错。原因有两...

vue项目上安装SCSS

原文:https://blog.csdn.net/zhouzuoluo/article/details/81010331  ① 使用vue-cli模板创建新项目:vu...

uni-app中使用iconfont字体,亲测有用

一、下载好iconfont文件,复制iconfont.ttf这个文件至项目。 在你的项目中创建一个iconfont.css文件,文件内容: @font-face { font-fam...

vite.config.js配置@

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path f...

在写css时不起作用,请排查是否是scoped的问题

在写css的时候,用了框架自带的组件table和card,把table包在了card里面,然后发现table的分页样式出现了问题,查看源码后发现card中写了ul li { margin-left:2...

npm简介

npm简介

做前端开发,如果项目达到了一定的规模,就离不开npm了。下面简单介绍一下npm的知识。1、npm的含义npm,Node Package Manager的缩写,也就是“节点的包管理器”。顾名思义,npm...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。