什么是vuex?  我理解的vuex就是数据和状态的管理

 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)
五大核心:
const store = new Vuex.Store({
state: { },
mutations: { }
action:{ }
getter:{ }
module:{ }
}) 1:state的使用:state是用来存储数据
如何读取数据? 读取数据最通用的方法就是计算属性。 computed: {
count () {
return this.$store.state.count
}
}
但是我们用map函数会简单方便读取数据 mapState import { mapState } from 'vuex'
computed:{
...mapState({
// 箭头函数可使代码更简练
count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count', // 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。 computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
2 mutation 这个是修改state中数据状态的唯一方法 ,说白了就是mutation提供方法来修改state中的数据,方法中可以传递参数,一个是state一个是payload ,payload是调用时候单文件组件中传递过来的数据
如何修改提交?
mutations: {
increment (state,payload) {
// 变更状态
state.count++
}
}
单文件组件中提交mutation中的方法
this.$store.commit('increment',{id:1})
提交increment 方法 并且传入参数{id:1}
mapmutation提交
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` // `mapMutations` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}

  

 

vuex 中五大核心以及map函数的应用的更多相关文章

  1. 学习JQuery中文文档之map()函数和get()函数

    今天学到一个新的函数map(). map(callback) 官方概述: 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式 ...

  2. perl编程中的map函数示例

    转自:http://www.jbxue.com/article/14854.html 发布:脚本学堂/Perl  编辑:JB01   2013-12-20 10:20:01  [大 中 小] 本文介绍 ...

  3. perl的map函数

    perl的map函数的使用: 语法 map EXPR, LIST map BLOCK LIST 定义和使用 对list中的每个元素执行EXPR或BLOCK,返回新的list.对每一此迭代,$_中保存了 ...

  4. Python3下map函数的显示问题

    map函数是Python里面比较重要的函数,设计灵感来自于函数式编程.Python官方文档中是这样解释map函数的: map(function, iterable, ...) Return an it ...

  5. 解决Python3下map函数的显示问题

    今天小编就为大家分享一篇解决Python3下map函数的显示问题,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧map函数是Python里面比较重要的函数,设计灵感来自于函数式编程.P ...

  6. 实现python中的map函数

    假设Python没有提供map()函数,自行编写my_map()函数实现与map()相同的功能.以下代码在Python 2.7.8中实现. 实现代码: def my_map(fun,num): i = ...

  7. Python中的map()函数和reduce()函数的用法

    Python中的map()函数和reduce()函数的用法 这篇文章主要介绍了Python中的map()函数和reduce()函数的用法,代码基于Python2.x版本,需要的朋友可以参考下   Py ...

  8. Python中map()函数浅析

    MapReduce的设计灵感来自于函数式编程,这里不打算提MapReduce,就拿python中的map()函数来学习一下. 文档中的介绍在这里: map(function, iterable, .. ...

  9. python中的zip()函数和map()函数

    一.zip()函数 1.语法: zip(iterable, ...) 参数说明: iterable,...-- 一个或多个迭代器; 在python2中: zip() 函数用于将可迭代的对象作为参数,将 ...

随机推荐

  1. SQL SERVER 月、季、年统计与常用查询语句汇总

    一.SQL SERVER 月.季.年统计查询 --本天 SELECT *FROM dbo.TableName WHERE DATEDIFF(DAY,TimeField,getdate())= 0; - ...

  2. 学习 MeteoInfo二次开发教程(一)

    来自气象家园:http://bbs.06climate.com/forum.php?mod=viewthread&tid=6631 按照教程,没有太大问题,有些是对c#操作不熟悉导致. 1.添 ...

  3. 一些恶作剧的vbs程序代码

    恶作剧的vbs代码,这里提供的都是一些死循环或导致系统死机的vbs对机器没坏处,最多关机重启一下就可以了,将下面的任意一段代码保存为*.vbs即可 循环弹窗: do msgbox "hi&q ...

  4. 代码:CSS——reset.css

    http://www.cnblogs.com/qq21270/p/5577856.html 图片列表 A链接标签: /* 链接样式.文字颜色 */ a{color:#666;text-decorati ...

  5. uni-app开发小程序准备阶段

    1.软件安装 开始之前,开发者需先下载安装如下工具: HBuilderX:官方IDE下载地址 下面开发工具根据需求进行安装: 微信小程序开发工具安装 https://developers.weixin ...

  6. leetcode437

    /** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...

  7. React页面插入script

    项目中遇到插入广告的需要,而广告的信息只是一个url链接,这个链接返回的时一个js,和以前插入广告有点不同.所有找了很多方式. 先来展示广告链接返回的信息: 假设广告链接为:http://192.16 ...

  8. spring-AOP之通知和顾问

    通知和顾问都是切面的实现形式,其中通知可以完成对目标对象方法简单的织入功能. 而顾问包装了通知,可以让我们对通知实现更加精细化的管理,让我们可以指定具体的切入点. 通知分为前置通知,环绕通知及后置通知 ...

  9. tensorflow读取本地MNIST数据集

    tensorflow读取本地MNIST数据集 数据放入文件夹(不要解压gz): >>> import tensorflow as tf >>> from tenso ...

  10. 关于$.ajax同步和异步的问题和提交后台的一些问题。

    经常有人ajax函数外,定义一个全局变量,并且在返回函数取出一个值用作判断条件,但是这一条件常常失效. var OnOff=0; var checkPhone = function() { var p ...