pinia中数据解构

hykeda4年前Vue3978

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

相关文章

vue3 拖拽插件 vue.draggable.next

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

vue中的h函数使用

一、参数设置h函数接收三个参数。第一个参数:,可以为一个html标签,一个组件,一个异步组件,或者是一个函数式组件。第二个参数:{ Object } Props,与attributes和props,以...

前端常用的UI组件库

Arco DesignTaro UISemi DesignAnt DesignElementView DesignVantLayui-vueFusion Design1. Arco Desi...

vuex存储和本地存储(localstorage、sessionstorage)的区别

1. sessionStorage    sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。   用法: ...

直接在浏览器中使用 vue3+element-plus中icons的方法

首先引入文件,如果用cdn的方式:<script src="//unpkg.com/@element-plus/icons-vue"></script&...

vite配置代理proxy实现跨域问题

最近在开发vite+vue项目时,调用接口获取服务器数据时提示接口有跨域问题,解决办法是配置代理:export default defineConfig({  //配置代理  se...

发表评论    

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