为什么官方推荐我们将vuex的state属性绑定到computed，那么是否可以绑定到data里面呢？...

最新推荐文章于 2024-10-04 21:43:36 发布
最新推荐文章于 2024-10-04 21:43:36 发布
阅读量2.4k 收藏
点赞数 3
文章标签： javascript 数据结构与算法 ViewUI
原文链接：https://juejin.im/post/5cdbcb556fb9a0321728435a
版权

1、首先我们先说一下，为什么官方示例当中是绑定到computed里面的?

这是因为data 中的内容只会在 created 钩子触发前初始化一次,这个时候如果data里面绑定的是vuex值类型数据，那么后面无论怎么修改vuex的state状态，data中对应
的属性值是不会变化的,而 computed 则是通过依赖实现的，计算属性在它的相关依赖发生改变时会重新求值。
复制代码

2、上面说了为什么官方示例代码vuex state是绑定在computed里面，那么就不能绑定data了吗？

也不完全是，前面已经特别强调了绑定data属性的是vuex值类型数据所以不会更新，这样就明白了吧，换成引用类型就可以了，
这其实是通过数据结构避开了这个问题，但是我们不推荐这样做，还是老老实实用computed吧，这里只是解决一下心中的小疑问。复制代码
weixin_34294649
关注
简述双向绑定和 vuex 是否冲突 ？
youhebuke225的博客
05-31 425
双向绑定和Vuex在Vue.js框架中并不直接冲突，但它们在严格模式下的使用确实需要一些注意。
vuex是什么?
weixin_59457130的博客
11-01 1530
Vuex 什么是vuex vuex是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。 要点: vue官方搭配，专属使用 (类似于：vue-router)，有专门的调试工具 集中式管理数据状态方案 (操作更简洁)data() { return { 数据, 状态 }} 数据变化是可预测的 (响应式) 小结: vuex是vue官方提供的独立组件体系之外的,管理公共数据的工具 Vuex的学习内容 state： 统一定义公共数据（类似于data(
Vuex中的state，为什么放在component的的computed属性而非data中？
weixin_43912756的博客
09-06 2814
如何使用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
为什么要使用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...
Vue2 与 Vue3 中 Computed 计算属性详解
最新发布
m0_57836225的博客
10-04 894
无论是 Vue2 还是 Vue3，计算属性都是一个非常强大的特性，可以帮助我们简化代码，提高开发效率。计算属性是基于它们的响应式依赖进行缓存的，只有在它们的依赖发生变化时才会重新计算。在 Vue2 和 Vue3 中，默认情况下计算属性是只读的，如果想要修改计算属性的值，需要使用get和set的写法。在面试中，可能会问到关于计算属性的问题，例如计算属性的结果值可以修改吗？答案是可以的，但需要通过特定的写法。
computed vue 不 触发_vue.js - 获取 vuex state 中的值一定要使用 computed 而不能使用 data 吗？...
weixin_39856709的博客
12-19 1082
问 题回答者提到：data是有缓存的，一旦Vuex中值改变了，没法做到响应。而放在computed中，虽然也有缓存，但会自动监视依赖。请问什么叫自动监视依赖呢？记得 Vue 官方文档中提到过几种不会触发更新检测的情况，其中包括直接修改对象的属性。还提到这时需要用 Vue.set() 进行修改。是不是形如以下方式：data(){return {topicList: this.$store.state...
vuex-state:mouted中将vuex内state中数据存储到data内
Isabeldeng的博客
10-15 1944
<script> export default { data() { return { list: [] } }, mounted () { this.list = this.$store.state.menulist; // console.log(this.list); }, } </
vuex基础 (二) 01-state——申明数据，相当于vue实例选项中的data & 计算属性，其实就是一个方法，用来声明数据，且必须要有返回值
weixin_44867717的博客
02-24 745
01-vuex基础-state——申明数据，相当于vue实例选项中的data 管理数据 在src/main.js中： // 初始化vuex对象 const store = new vuex.Store({ // 配置项 state: { // 管理数据，相当于vue实例选项中的data count: 0 } }) 在组件中获取state的数据：原始用法插值...
实现vuex与组件data之间的数据同步更新方式
10-16
然而，当尝试将Vuex store的状态（`state`）绑定到组件的`data`上时，情况就变得复杂了。默认情况下，当`state`中的数据变化，直接在组件模板中通过`$store.state`访问的数据会自动更新，但若将`state`的数据赋值给`...
data 获取vuex_vuex在actions里面异步请求数据，获取到数据提交给mutations,在组件获取给data...
weixin_32905035的博客
12-31 370
问题描述vuex在actions里面异步请求数据，获取到数据提交给mutations,在组件获取给data不对问题出现的环境背景及自己尝试过哪些方法我在actions异步请求是没有问题的，接口是你可以正常调用的在组件获取到状态值我使用的是this.$nextTick 等加载完毕再去给data值 按理说也是可以的 但是不对相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)actionsg...
Vuex
小海的博客
10-25 132
vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 vuex解决了什么问题 如何确保在不同组件中的数据保持同步 如何确保每次对于数据的修改都是可追踪的 举个例子 一个户外商店有两名员工，张三和李四，在一天的早上，他们分别对帐篷的数量做了一次盘点，发现一共有三个帐篷可供出售，俩个人在商店里度过了一天，张三卖出去俩个，他以为库存里还有一个，李四卖出去一个，他以为库存里还有俩个，而
data的值 如何初始化vue_如何把vue中state的值赋值给data
weixin_30902943的博客
01-12 2809
我在created中派遣的mutation,然后改变我的初始化statestate(初始值):mutation(改变state):action(调用接口):在created生命周期中派遣:通过mapState拿到改变后的state:这个是我的data:!我希望当我的页面加载完成defaultdata的值是state的值?试了好多都不行,大家有什么好办法吗？我觉得可以这样// ...computed...
vueX state 里面的属性用在组件中的computed属性，而非data中
weixin_30824479的博客
01-17 354
data: data中的依赖变更，data的属性不会变更。因为data在created钩子触发前初始化一次，若属性的值是纯粹的字面量，js字面量赋值后自然不会自动更新啦， computed：通过依赖追踪实现，依赖变更，computed中的属性会重新计算。 错误： 　　　　data(){ 　　　　　　return { 　　　　　　　　dataList:this.$store.sta...
Vue指令、样式及类名绑定、methods、computed、watch
congboer的博客
07-25 440
Vue指令、methods、computed、watch、 vue的指令有：v-html、v-text、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-once、v-pre、v-cloak共14种。 其中： 1、v-html和v-text是用来数据展示的，两者区别： v-html可以识别标签并解析，v-text不会识别...
vuex-state
MJOY791270505的博客
03-03 477
一、state 引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态 state: { //存放状态 nickname:'Simba', age:20, gender:'男' } 有了vuex，我们不必在考虑组件之间的传值，直接就可以通过$store来获取不同的数据，如果需要vuex中的多个数据的这时候，我们可以将它定义在computed中。 Props，methods,data和computed的初始化都是在beforeCre
vue中的状态管理vuex
weixin_49405038的博客
05-12 366
vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 vuex解决了什么问题 随着应用程序规模的扩大，应用程序使用的数据量也随之增长，我们会遇到俩个非常明显的问题 如何确保在不同组件中的数据保持同步 如何确保每次对于数据的修改都是可追踪的 如果上面的专业描述太过专业我们有点摸不着头脑，看一个现实中的例子，一个户外商店有两名员工，张三和李四，在一天的早上，他们分别对帐篷的数量做了一次盘点
Vuex中的Getters
ivenqin的博客
03-23 852
在Store仓库中，state是用来存放数据的，如果要对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，我们可以考虑把这个数据提出来共享。这就是getters存在的意义，我们可以将getters认为是 store 的计算属性(computed)。 就像计算属性一样，getters 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生...
Vuex笔记
qq_41486048的博客
04-02 92
Vuex笔记 Vuex是一个专为Vue.js应用程序开发的状态管理模式。 调试工具：vue devtools 1. state 在state中定义数据，在组件中直接使用； 目录：store/index.js export default new Vuex.Store({ //state相当于组件中的data，专门用来存放全局的数据 state: { num: 0 }, getters: {}, mutations: {}, actions: {
计算属性computed里面的getter和setter
热门推荐
前端技术的学习整理
06-28 1万+
参考一： 在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。 vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，如下代码： &lt...
input双向绑定vuex数据
06-09
要实现input双向绑定vuex数据，需要在组件中使用computed属性将vuex的state映射到组件的data中，然后使用v-model指令进行双向绑定。当input的值改变时，通过调用vuex的mutation来修改state的值。 以下是一个示例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值