pinia中数据解构

hykeda4年前Vue3318

在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变量是具有响应性的,可以随意使用。

相关文章

在html5中使用Vue3,并且使用组件形式

有的时候为了使用vue编写一些前端程序,如果直接搭建框架感觉太过庞大了。如何直接在html中使用呢?接下来详细介绍:1)引入Vue,并创建Vue实例在官网上,已经讲得很清楚了,我们可以这样使用&nbs...

vue3 拖拽插件 vue.draggable.next

官网地址:https://github.com/SortableJS/vue.draggable.next安装:npm i -S vuedraggable@next引入插...

使用vite打包vue项目生成dist文件夹,部署至nginx除了index.html,其他路径都提示404错误的解决

使用vite打包vue项目生成dist文件夹,部署至nginx除了index.html,其他路径都提示404错误的解决

用vue打包生成dist文件夹,然后在本地nginx部署vue项目时只能访问默认页面,刷新和跳转页面都会出问题。原因:只访问了dist文件下的 index.html、index.htm页面,...

vue 中父组件要向子组件通过props传值出现延时处理方案

在开发vue是,父组件要向子组件传值,但是这个值是父组件通过接口请求的,如果直接通过<ABC :abc="data"/>这样在子组件中获取到的abc是为空,因...

Vuex 通俗版教程告诉你Vuex怎么用

最近一直在用vue开发项目,写来写去就是那么些方法,对于简单的项目一些常用的vue方法足以解决,但是涉及到页面状态,权限判断等一些复杂的传值,vuex是必须的。对于vuex也运用一段时间,但是总觉得...

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

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

发表评论    

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