mapState
Vuex 提供的辅助函数之一，将 store 中的状态映射到组件的计算属性中，使得在组件中可以轻松地访问 Vuex store 中的状态值
-
MapState(映射状态)
在我们的 Count.vue 组件中，可以使用 mapState 来更简洁地获取 count 的状态值
首先，导入 mapState：
import { mapState } from 'vuex'
然后，在 computed 中使用 mapState：
computed: {
//借助mapState生成计算属性，从state中读取数据 如果是对象的话使用key-value
// 对象写法 soqi是计算属性名，count是状态名
...mapState([suoqi:'count'])
// 数组写法
...mapState(['count'])
},
数组的写法：
-
count（在计算属性中的名字）是我们在组件中可以使用的计算属性名 -
count（在数组中的字符串）是 Vuex store 中的状态名，从state中读取数据
它们一起简写为['count']了
现在， Count.vue 组件中会有一个名为 count 的计算属性，它会映射到 Vuex store 中的 count 状态，就和我们之前的使用方式一样啦
等同于：
// 对象写法
...mapState({
// soqi:'count'
count: 'count'
})
// 普通写法
suoqi() {
return this.$store.state.count;
},
count() {
return this.$store.state.count;
}
总的来说，...mapState(['count']) 让我们可以非常方便地将 Vuex store 中的状态映射到组件中，避免了在每个组件中都需要写一遍 this.$store.state.count 的繁琐代码。
这里的点点点...是用了ES6的对象展开运算符（Spread Operator）语法，给不会的伙伴简单拓展一下
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, d: 4, e: 5 };
console.log(obj2);
obj2 是通过将 obj1 中的所有属性展开，再添加额外的属性 d 和 e 构建而成的。
在我们之前的讨论中，mapState(['count']) 使用了对象展开运算符将 count 属性从 mapState 返回的数组中提取出来，并将它作为组件的计算属性。
相当于这个过程：
computed: {
count() {
return this.$store.state.count;
}
}
没理解的话再拓展一点，mapState(['count']) 返回的是一个包含一个函数的对象，所以...把mapState的这些属性全部展开
{
count: function state() {
return this.$store.state.count;
}
}
这样就使得我们可以在组件中以 this.count 的方式方便地访问 Vuex store 中的 count 状态了，和之前的结果效果一样文章来源：https://www.toymoban.com/news/detail-728390.html
对您有用的话请点个免费的赞叭，有任何问题都可留言或私信哈~文章来源地址https://www.toymoban.com/news/detail-728390.html
到了这里，关于一文解释mapState的来龙去脉的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
