Vue 之 Vuex（3）mapState 的使用

mapState 是用来简化 computed 计算属性的一种写法，下面做一个对比：

未使用之前

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

使用mapState之后

computed: {...Vuex.mapState(['count']),}

具体使用见下面代码详情

<!DOCTYPE html>
<html lang="en" xmlns="">
<head><meta charset="UTF-8"><title>Vuex：mapState 的使用</title>
</head>
<body>
<div id="app"><button-counter></button-counter>
</div><script src="vuex.js"></script>
<script src="vue.js"></script>
<script>Vue.component('ButtonCounter', {data() {return {localCount: 5}},computed: {...Vuex.mapState([// 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以使用简写// 与 count: state => state.count 作用相同'count']),...Vuex.mapState({// 箭头函数可使代码更简练count: state => state.count,// 传字符串参数 'count' 等同于 `state => state.count`countAlias: 'count',// 为了能够使用 `this` 获取局部状态，必须使用常规函数countPlusLocalState(state) {return state.count + this.localCount}})},methods: {...Vuex.mapMutations(['increment']),},template: `<div><button @click="increment">You clicked me {{ count }} times.</button><p>count: {{ count }}</p><p>countAlias: {{ countAlias }}</p><p>countPlusLocalState: {{ countPlusLocalState }}</p></div>`})// 创建Vuex容器const store = new Vuex.Store({strict: true,state: {count: 0},mutations: {increment(state) {state.count++}}})new Vue({el: '#app',store});</script>
</body>
</html>

Vue 之 Vuex（3）mapState 的使用相关推荐

基于vue和vuex的todos效果展示及源码分享
todos,待做项目经常被以各种方式来实现,js,node, 这里分享一个基于vue和vuex的todos 主要有三部分代码main.js,index.js,App.vue import Vue fr ...
Vue使用Vuex一步步封装并使用store
文章目录一.安装Vuex依赖二.一步步封装store 1. main.js中全局引入store仓库(下一步创建) 2. this.$store 3. this.$store.state 4. th ...
[Vue.js] Vuex的使用
效果展示目标 Vuex概述 Vuex基本使用使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享使用Vuex管理数据 ...
「Vue」vuex 的使用
vuex 概述 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 利用 vuex 集中管理数 ...
Vue+Vue Router+Vuex页面演示
Vue+Vue Router+Vuex简单页面演示 1.目录结构(使用vue-cli创建) 2.编写代码 src/router/index.js import Vue from "vue&q ...
Vue（Vuex插件）
一.Vuex的介绍 1. 概念专门在Vue中实现集中式状态数据管理的一个Vue插件,对Vue的应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信. ...
Vuex实践-mapState和mapGetters
一.前言本文章是vuex系列的最后一篇,主要总结的是如何使用mapState和mapGetters访问vuex中的state和getters. 二.多个模块中mapState和mapGetters的 ...
vuex进阶 mapState、mapGetters、mapMutations、mapActions
一.state 1.1 引入vuex 以后,我们需要在state中定义变量,类似于vue中的data,通过state来存放状态 import Vue from 'vue' import Vuex fr ...
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
mapState 和mapGetters 用于生成计算属性computed mapState({"计算属性名":"State数据","xxx" ...

Vue 之 Vuex（3）mapState 的使用

Vue 之 Vuex（3）mapState 的使用相关推荐

最新文章

热门文章