关于Vue 组件中computed获取经getters变化的store中的state

最新推荐文章于 2024-08-22 15:24:34 发布
最新推荐文章于 2024-08-22 15:24:34 发布
阅读量1.1w 收藏 28
点赞数 8
分类专栏： Vue 文章标签： computed 生命周期 getters store
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41261490/article/details/97954902
版权

问题描述：当computed中的属性是从store.state中获取的时候，我们拿到的属性值是store中state的初始值还是getters计算后的值？

问题发现：页面中渲染是19，而vue-devtools中state还是18 引发的思考

这是Store中的state和getters

 

这是组件中的computed 

 

页面上展示的结果是：

 

我打印this.$store.state.age，结果出现了两次

最低0.47元/天 解锁文章
DiuDiu_yang
关注
专栏目录
vue中computed和vuex中getters计算属性传参
huataoblog
11-21 2326
computed <template> <div id="app"> <h3>{{count(1)}}</h3> //需要在计算时传值 <router-view></router-view> </div> </template> data() { return {...
vuex创建store并用computed获取数据
weixin_30883271的博客
04-23 2106
vuex中的store是一个状态管理器，用于分发数据。相当于父组件数据传递给子组件。 1.安装vuex npm i vuex --save 2.在src目录中创建store文件夹，里面创建store.js （1）store.js里引入vue和Vuex， import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ...
Vue中的计算属性（computed）与侦听属性（Watch）
YLXB2的博客
06-12 757
computed计算属性：当依赖的属性的值发生变化时，计算属性会重新计算，否则使用缓存中的属性值。 功能：双向绑定、缓存值、分离逻辑 基本用法： computed: { rooms(){ return this.$store.state.rooms1 } }//当vuex里面的rooms1变化，那么计算属性就会响应式地发生变化，重新渲染 计算属...
Vue3:computed()使用场景
weixin_73060959的博客
08-22 312
接受一个，返回一个只读的响应式对象。该 ref 通过.value暴露 getter 函数的返回值。它也可以接受一个带有get和set函数的对象来创建一个可写的 ref 对象。
VUE的computed计算属性——数组的反转、格式的修改、 数组的截取、VUEX获取state
HarryHY的博客
10-08 6400
定义 类型：{ [key: string]: Function | { get: Function, set: Function } } 详细： 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。 ...
vue3 computed 取store值 出现 do not mutate vuex store state outside mutation handlers 错误
会飞的程序猿
08-11 1084
明明没有修改store值却有do not mutate vuex store state outside mutation handlers报错。开发中的各种奇怪问题。
记一次 vue 页面的computed中没有监听到store中属性变化的问题
yifangshikong的博客
08-25 1455
记一次 vue 页面的computed中没有监听到store中属性变化的问题
Vuex 在Vue 组件中获得Vuex 状态state的方法
10-18
在 Vue 组件中获取 Vuex 的状态，主要是通过 Vue 实例中的 `$store` 属性，以及 Vuex 提供的一些辅助方法。以下是详细的解释： 1. **从 store 实例中读取状态** 最基础的方法是在组件中直接通过 `this.$store....
【Vuex】Vue从仓库中获取state中数据的方法
forever__fish的博客
10-10 5819
在Vue中，我们离不开组件间的通信，有父子通信、兄弟通信、跨级通信等。由此，数据的存储是一个需要考虑的问题，什么方法能够使数据容易读取还不浪费内存呢？这需要根据具体问题具体分析。常见的方法有 props、$emit、$children、$root、vuex 等，今天我们重点分析一下使用vuex来存储数据并如何去获取数据。
组件访问VUEX.store中的state中的数据
qq_44173499的博客
02-27 4019
组件访问VUEX.store中的state中的数据 在组件的computed中，使用this.$store.state.xxx 去访问数据 1.数据仓库store 定义好公共数据 Markup var store = new Vuex.Store({ namespaced:true, state: { totalPrice:100, goods:[ {id:1,title:'iphone',price:399,num:3}..
Vue中的computed的用法
weixin_63456913的博客
05-09 735
computed又被称作，用于动态的根据某个值或某些值的变化，来产生对应的变化，computed具有缓存性，当无关值变化时，不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去。一、computed简写形式当我们动态的去更改surname或name时，都会引起fullName的改变。
vue中，页面监听store中数据 的变化以及时做出相应，watch、computed与store的getter属性协调
weixin_51295863的博客
01-10 1435
那么我们的需求就是，当store中的name变化，登录页面可以监听到，然后进行判断，决定要不要跳转。所以我的登录页面有一个按钮，点击之后可以触发mutation中的更改函数，去更改name这个属性，那么该如何使得store中的name改变后，登录页面可以主动监听到？简单来说，就是通过登录页面的computed计算属性，写一个函数，然后返回的是所要监听store中的某个属性，注意这个属性的返回必须使用getter，不能直接使用store.state来访问！
vue computed使用_vue 随记（3）：“新时代”的姿势
weixin_39653622的博客
11-23 436
体验vue3对比2.x旧版本，vue3新增了什么：•性能上：最多比vue2 快2倍•静态标记提升•proxy取代defineProperty•tree shaking：按需编译打包代码•composition api ：类似hook的编码风格•支持typescript：面向未来目前的代码 98% 以上使用 TypeScript 编写。如果你还没有学习 TypeScript，请尽快学习，否...
为什么要使用computed而不是data获取vuex中的state
Wopelo的博客
05-08 1万+
最近在学习vuex时，照着官网最基本的 Vuex 记数应用示例敲的时候遇到了这样一个问题 想实现的效果： 点击加号、减号实现数字增减 vuex设置： Vue.use(Vuex); Vue.prototype.$store = new Vuex.Store({ state: { count: 0 }, mutations: { in...
Vuex中的state，为什么放在component的的computed属性而非data中？
weixin_43912756的博客
09-06 2775
如何使用Vuex中state里的数据 参考：vuex的state中的数据的四种使用方法 存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，data遵循什么规则？ 类型：Object | Function，组件的定义只接受 function Vue会递归的将data中的property转换为getter/setter，从而让data的property能够响应数据变化 var vm = new Vue({ data: {a : 1}) ,可以通过vm.$data访问原始数据对象。V
mounted中的dispatch与computed中的state
w18789476022的博客
04-05 338
记录代码在vuex中的操作 1. 当在mounted中输入以下代码时,相当于传值给vuex的mutation改变state mounted() { // 在vuex中的state中可以看到数据 this.$store.dispatch("getShopGoods"); }, 2. 想要读取vuex中state的数据时： computed: { // 从vue中的组件中可以看到 goods() { return this.$store.
vue 之更新了vuex store里面的 数据后 界面视图没有同步更新(动态数据)
热门推荐
wangshang1320的博客
08-08 2万+
store state /detail/index.js const state = { id:0, playUrl:'b' }; const getters = {}; const actions = {}; const mutations = { setPlayUrl(state,url){ state.playUrl = url; ...
vuex解析
qq_41893646的博客
11-01 224
第一章Vuex入门 1.1Vuex介绍 什么是vuex？ 它是vue团队提供的状态管理模式，简单来说就是针对vue.js提供的数据驱动解决方案。 vue是双向绑定，vuex是单向绑定的，一般来说单向绑定更安全 vuex为什么非常重要？ 它可以使vue开发大型复杂的产品变得容易。 安装vuex npm install vuex --save yarn add vuex cnpm install -save vuex 配置vuex 1 创建一个store文件夹，然后在里面创建一个index.js 内容如下 i
vue3 选项式API 在组件中如何获取pinia store中的值
最新发布
09-25
Vue 3 中的选项式 API 提供了一种简洁的方式来访问 Pinia store 中的数据。Pinia是Vue3官方推荐的状态管理模式，它基于Vuex的设计思想。要在组件中通过选项式API获取store中的值，你可以按照以下步骤操作： 1. 首先，在`setup()`函数中导入你需要的store实例。假设你的store名为`store`，可以这样导入： ```js import { useStore } from '@/store'; const store = useStore(); ``` 2. 然后，你可以直接使用`store.state`或`store.getters`来获取state或计算属性的值，例如： ```js const valueFromState = computed(() => store.state.yourProperty); const valueFromGetter = computed(() => store.getters.yourGetter); ``` 3. 如果你想监听store的变化，可以使用`watchEffect`或`onMounted`等生命周期钩子： ```js onMounted(() => { watch(store, (newVal) => { // 当store变化时执行这个回调 console.log('Store updated:', newVal); }, { deep: true }); }); ``` 4. 获取完数据后，就可以在模板中使用`v-bind`或`ref`结合`valueFrom*`计算属性来显示store中的值了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DiuDiu_yang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值