Vue3+Pinia 在子组件中无法获取最新状态属性

最新推荐文章于 2024-07-29 10:51:40 发布
最新推荐文章于 2024-07-29 10:51:40 发布
阅读量199 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sky8880/article/details/140321434
版权

问题：Vue3+Pinia 父组件中设置状态属性，在子组件中无法获取最新状态属性

解决：👇

const loginStore = useLoginStore()
const userInfo = computed(() => {
  return loginStore.userInfo
})

skyseey
关注
Vue3 + Ts + Pinia + uni-app 学习笔记
qq_33365152的博客
09-13 596
Vue3 +Ts + Pinia + uni-app 学习笔记
【vue3+pinia+Cookie】实现token登录及数据持久化
花椒和蕊的博客
08-08 2404
【vue3+pinia+Cookie】实现token登录及数据持久化
vue3中使用pinia，更改state中数据，视图不更新问题
第⑦个前端
01-08 1869
使用computed，可以实现。
vue3在路由route.js中获取不到仓库pinia中store里面的值
qq_50512645的博客
04-23 431
原因：小仓库(useUserStore )必须有大仓库(pinia)才能运行，在组件中能使用pinia仓库的数据，是因为在main.ts中已经在vue上面挂载了大仓库(pinia)，但是route.js不是vue组件，没有被挂载大仓库，所以不能运行。
vue3解决进入页面数据不是最新问题
2302_77290281的博客
07-17 164
vue3解决进入页面数据不是最新问题
vue3使用pinia仓库解构赋值响应式丢失的解决方式
最新发布
HWL5679的博客
07-29 487
在使用 Pinia 时，为了确保状态的响应性，推荐使用storeToRefs来处理解构赋值的情况。
vue3中，如何使pinia各组件中的数据响应数据
andy_68147772的博客
11-30 1678
在公共的侧边栏组件中，请求了一次用户信息，但在其他组件中调取不到。在其他组件中，在pinia请求后端数据之前，就使用了store中的数据，导致没获取到值。所以我们要做的是，在所有的组件中共享store的值，就算开始没调取到，但当在当全局组件从后端获取到数据后，也能实时的在其他下组件中响应。如果你的应用依赖于用户信息，你可能需要在应用的顶层或者在路由守卫中获取这些信息，以确保在渲染组件之前用户信息已经可用。：在你的组件中，使用 Pinia store 并在组件创建时获取用户信息。的组件都会自动更新。
vue3 + ts +pinia+element-plus+mock 项目---动态路由+用户权限路由篇
hzz1998的博客
12-01 2350
实现动态路由前提是服务端做好Router路由表的返回数据格式，一般分为两种情况(本人见识少，目前只遇到这两种)一是服务端返回客户端登录用户的权限ID数组，客户端通过权限ID修改对应路由的hidden属性选择是否展示，同时在router.beforeEach中判断好每次路由跳转的目标地址是否符合权限信息，防止通过地址栏输入方式跳转；二是前端配置好login，home等基础通用路由，再由服务端返回完整路由表，通过解析路由数据，动态添加至路由表中。至此，动态路由数据基本就可以成功添加在本地的路由表中了。
vue3+vite+pinia+elementPlus后台管理系统源码.zip
10-27
与Vuex相比，Pinia的API更加直观，例如使用`defineStore`定义商店，`state`定义状态，`getters`获取计算属性，`actions`处理异步操作，以及`setup`中的`useStore`来注入并访问store。 4. **Element Plus**：Element...
vue3整合pinia案例
12-14
而Pinia则是基于Composition API构建的状态管理库，它提供了与Vue3的天然集成，使得在组件中访问和修改状态变得非常方便。 在整合Vue3和Pinia的过程中，首先需要安装Pinia。通过npm或yarn，你可以运行以下命令来...
vue+uniapp+pinia开发时使用pinia状态需要手动刷新才更新组件里的数据
qq_63112310的博客
12-16 1250
一开始我是引入定义的pinia状态，并且将他们解构（如下图），结果发现及时更新了状态值但是页面还是不更新，要手动刷新。通过网上查找资料发现解构赋值出现了问题。方法二：之间在引用数据那里引入状态。方法一：采用计算属性。
pinia使用过程中遇到的问题和疑问
qq_45032178的博客
07-18 2061
使用pinia时，如果仓库中state一开始存储的数据为空，那么我们直接使用仓库数据则会报错导致页面刷新为空。可以通过可选链运算符解决?当然我们可以在仓库的state的hospitalInfo对象中预先配置上我们需要的属性，值为空，这样直接用也不会保存。
vue3中如何使用pinia -- pinia使用教程（一）
JackZhouMine
06-17 1104
pinia 是一个 Vue3 的状态管理库，它的 API 设计和 Vuex 有很大的相似之处，但是它的实现方式和 Vuex 完全不同，它是基于 Vue3 的新特性。这种方案，也不好，要是组件挂载多次，就会创建多个 store，这个 store 也不会被销毁，但是可以手动销毁的 API。上面的 useCounter 使用选项式 api 创建，pinia 也支持组合式 api, 这和 vue3 的组合式函数非常贴近，使用上更加简单。使用一个工厂函数，组件每次挂载，都会执行工厂函数，返回一个新的 store。
Vue3-Pinia(小菠萝)使用详解
做笔记/记录遇到的前端bug
12-28 4130
带你快速上手，Vite创建的Vue3项目引入 Pinia，详细介绍了Vue3项目全局状态管理器（store）Pinia的安装与使用
pinia简介和setup语法糖
weixin_46560512的博客
11-07 4595
pinia简介和setup语法糖 1.pinia的基本特点 ​ pinia同样是一个Vue 状态管理工具，它和vuex有很多相似的地方。本质上他是vuex团队核心成员开发的，在vuex上面提出了一些改进。与vuex相比，pinia去除了vuex中对于同步函数Mutations和异步函数Actions的区分。直接在Actions中便能够使用同步和异步方法（在vuex的开发计划中也将会除去同步和异步的区分）。其次相比于vuex，pinia对于typescript的支持性更好，友好的devTools支持，pin
27 vue3 Pinia取值
本以为成功很简单，没想到活成普通人都需拼尽全力！
03-10 8567
本篇记录使用pinia状态管理工具如何取值的操作 1. 进行vue3的创建 以及 pinia的安装，还不知道的请看上篇文档 目录如下： 2.app.js中写入如下代码 import {defineStore} from "pinia" const appStore = defineStore('appStore', { state: () => ({ baseUrl: 'https://www.baidu.com/', appid: 'wx1..
在router中使用pinia报错解决
weixin_46054431的博客
05-14 8451
在router中使用pinia（getActivePinia was called with no active Pinia. Did you forget to install pinia）报错解决 使用vue3+ts+pinia开发项目中，我相信好多人使用vuex的传统思想在router中使用，但是用这种思想对于pinia就行不通了就会报错，下面简单是解决方案，如有更好的希望大家留言分享。 一、使用步骤 1.首先创建store.ts文件 import { createPinia } from "pini
vue3+pinia前端权限设置
06-08
在 Vue3 中，你可以使用 Pinia 来管理应用程序的状态。要设置前端权限，你可以使用以下步骤： 1. 定义你的权限列表 在你的应用程序中，你需要定义一份权限列表，它应该包含你的应用程序中所有的权限。 例如： ```javascript const permissions = { viewPage1: '可以查看页面1', viewPage2: '可以查看页面2', editPage1: '可以编辑页面1', editPage2: '可以编辑页面2', }; ``` 2. 定义你的 store 使用 Pinia，你可以定义一个 store 来管理你的应用程序的状态。 例如： ```javascript import { defineStore } from 'pinia'; export const store = defineStore({ id: 'app', state: () => ({ user: null, permissions: [], }), getters: { hasPermission: (state) => (permission) => { return state.permissions.includes(permission); }, }, actions: { login(user) { this.user = user; this.permissions = user.permissions; }, logout() { this.user = null; this.permissions = []; }, }, }); ``` 在这个 store 中，我们定义了两个状态：`user` 和 `permissions`。当用户登录时，我们会将用户的权限设置到 `permissions` 状态中。 我们还定义了一个 `hasPermission` 的 getter，它接收一个权限名称作为参数，并返回一个布尔值，表明当前用户是否有该权限。 3. 在组件中使用 store 在你的组件中，你可以使用 `computed` 属性来获取当前用户是否有权限。 例如： ```javascript <template> <div v-if="hasViewPage1Permission">可以查看页面1</div> <div v-if="hasEditPage1Permission">可以编辑页面1</div> </template> <script> import { computed } from 'vue'; import { useStore } from 'pinia'; export default { setup() { const store = useStore(); const hasViewPage1Permission = computed(() => store.getters.hasPermission('viewPage1') ); const hasEditPage1Permission = computed(() => store.getters.hasPermission('editPage1') ); return { hasViewPage1Permission, hasEditPage1Permission, }; }, }; </script> ``` 在这个组件中，我们使用 `computed` 属性来获取当前用户是否有查看页面1和编辑页面1的权限。我们使用 `useStore` 方法来获取我们之前定义的 store。 在这个组件中，我们通过使用 `v-if` 指令来判断当前用户是否有相应的权限，如果有，就显示对应的内容。 这就是如何在 Vue3 中使用 Pinia 设置前端权限的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值