vuex中为什么mapState 解构放在compued里, 不放在data里?

发布时间:2023年12月20日

1. vuex中为什么mapState 解构放在compued里, 不放在data里?

在Vuex中使用mapState将 Vuex store 中的状态映射到组件的计算属性(computed)中的原因是为了更方便地在组件中使用这些状态,并确保状态的响应式更新

mapState 实际上是将 Vuex store 中的状态__映射到组件的计算属性中__,而不是放在组件的 data 中。
这是因为 Vuex 中的状态通常用于在应用程序的多个组件之间共享和管理。
当这些状态发生变化时,Vue 的响应式系统会自动更新依赖于这些状态的组件

将 mapState 结果放在 computed 中的好处是可以直接在模板中使用这些计算属性,就像使用 data 中的属性一样,但又能够保持响应式。
这样,当 Vuex store 中的状态发生变化时,计算属性会自动更新,并触发相关组件的重新渲染。

如果将状态直接放在 data 中,它们就会失去响应式特性,因为 Vue 不会追踪对 Vuex store 中状态的更改。
因此,建议使用 mapState 将状态映射到计算属性中,以确保状态的响应式更新和方便地在组件中使用。

概括的说

vuex store中的状态存储的是需要在多个组件中共享的数据,当这些状态发生变化时,Vue的响应式需要监听值的改变,从而实现视图更新。

而如果将vuex store的某个对象值放在data中赋值,其结果是组件在初始化时(created阶段),data中被初始化了一个值,而vuex store中的这个对象在其他组件中被修改时,vue无法追中起变化,从而实现响应式。
如下:

data(){
	topicList: this.$store.state.topicList,
	count: this.$store.state.count
}

data中的topicList,仅仅是对this. s t o r e . s t a t e . t o p i c L i s t 的一个引用。(如果 t h i s . store.state.topicList的一个引用。(如果this. store.state.topicList的一个引用。(如果this.store.state.topicList 不是对象与数组的话,那就只是个赋下值给topList)。
所以当this.$store.state.topicList变化的时候,并不会触发data中topicList的setter。


MapState在computed中时,vue会根据函数的逻辑,自动判断其以来,从而监听到值的变化

computed:{
        topicList(){
            return this.$store.state.topicList
        } 
      }

如上,当这个依赖:this.$store.state.topicList 发生变化时,要重新计算 topicList 属性的值,并触发相应的更新操作。

2. data和computed的区别

  1. data是Vue组件中用于存储数据的属性。

    data属性的值,不会随着赋值的改变而改变。如果要改变这个属性的值,则需要直接给data属性赋值。

    info的变化不会随着赋值给它的obj.info的改变而变化,而是视图上修改这info或者this.info='yyy’时才会改变。

  // obj.info = 'xxx'
  data: { 
    info: obj.info 
    // 
  }
  1. computed是用于计算衍生数据的属性,它通过计算得出新的值。computed属性的的值会被缓存,只有在其依赖的响应式数据发生改变时,才会重新计算。
    computed属性,属于持续变化跟踪。在computed属性定义的时候,这个computed属性就与给他__赋值的变量__绑定了。改变这个__赋值变量__,computed属性值会随之改变。
    在computed属性定义的时候,这个computed属性就与给它赋值的变量绑定了。改变这个赋值变量,computed属性值会随之改变。**
  computed: {
    cinfo(){
      return obj.info
    }
  }
文章来源:https://blog.csdn.net/qq_24380731/article/details/135080448
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。