pinia中数据解构

hykeda4年前Vue3444

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

相关文章

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

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

Vue3 Pinia持久化存储

一、Pinia持久化存储二、使用步骤1.安装插件代码如下(示例):npm i pinia-plugin-persist --save2.store/index.js代码如...

Vue2.x笔记

vue2.0 开始不能挂载到<html> 或者 <body> 上。 transition 动画过渡的时候,如果是:<transit...

vue3中defineProps传值使用ref响应式失效详解

子组件接收父组件的传参。父组件:<template> <Son :data="data"/> </template> <s...

页面直接使用ElementUI,官方提供的表格代码,样式错乱

页面直接使用ElementUI,官方提供的表格代码,样式错乱

在使用element编写前端代码是,引入element的css和js,使用官方提供的例子:<template>   <el-table :data=&...

vue中的h函数使用

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

发表评论    

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