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

本文主要是介绍vuex中为什么mapState 解构放在compued里, 不放在data里?，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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.$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 // }

2. computed是用于计算衍生数据的属性，它通过计算得出新的值。computed属性的的值会被缓存，只有在其依赖的响应式数据发生改变时，才会重新计算。
   computed属性，属于持续变化跟踪。在computed属性定义的时候，这个computed属性就与给他__赋值的变量__绑定了。改变这个__赋值变量__，computed属性值会随之改变。
   在computed属性定义的时候，这个computed属性就与给它赋值的变量绑定了。改变这个赋值变量，computed属性值会随之改变。**

  computed: {cinfo(){return obj.info}}

这篇关于vuex中为什么mapState 解构放在compued里, 不放在data里?的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---