文档章节

vuex

大美琴
 大美琴
发布于 06/25 18:46
字数 259
阅读 10
收藏 0
点赞 0
评论 0

一、状态对象如何赋值给内部对象。三种方式:

1、使用computed赋值,一定要写this,不然找不到$store。

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

2、通过mapState的对象来赋值,这里使用箭头函数给count赋值。

computed:mapState({
    count:state=>state.count
})

3、使用mapState的数组来赋值。这最简单,但是经常使用。

computed:mapState(["count"])

二、Mutation修改状态

vuex提供了commit方法来修改状态。

1、传值,在修改状态的操作时候需要传值。

const mutations={
  add(state,n){
    state.count = state.count + n;
  },
  reduce(state){
    if(state.count > 1){
        state.count = state.count-5;
    }

  }
}
<div>
    <button @click="$store.commit('add',6)">+</button>
    <button @click="$store.commit('reduce')">-</button>
</div>

2、模板获取Mutations方法。$store.commit()这种写法不是很方便,改进。

引入mapMutations,在methods中加入mapMutations.直接使用reduce方法。

import {mapState,mapMutations} from 'vuex'
methods:mapMutations([
    'add','reduce'
])
<div>
    <button @click='add(6)'>+</button>
    <button @click='reduce'>-</button>
</div>

 

本文转载自:

共有 人打赏支持
大美琴
粉丝 4
博文 48
码字总数 18301
作品 0
宁德
程序员
真正掌握vuex的使用方法(一)

导语:vuex是什么?我的理解就是vuex是一个管理者,管理的方式是集中式管理,管理的对象即是vue.js应用程序中的众多组件的共享部分。学习的过程当中,希望按照我的步骤一步一步来进行练习! ...

张培跃
05/17
0
0
[译]为什么 VueX 是前端与 API 之间的完美接口

原文地址:Why VueX Is The Perfect Interface Between Frontend and API 原文作者:KBall 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:zhmhhu 校对者:sunui, Te...

zhmhhu
06/04
0
0
真正掌握vuex的使用方法(二)

从上篇文章当中相信大家已经对vuex有了一些大概了解了,接下来咱们结合实例来继续敲代码吧!切记一定要动手实操练习一遍! 接下来咱们来完成一个超级简单的投票功能!要求很简单,点击“投票...

张培跃
05/17
0
0
真正掌握vuex的使用方法(七)----完结

今天是关于vuex的最后一篇文章了!怎么说呢?且行且珍惜吧!!认真尝试每一行代码! 之前的文章当中,我们把所有的数据都存放到了 vuex文件夹当中的store.js当中。但随着将来项目的复杂度增大...

张培跃
05/27
0
0
vuex其实超简单,喝完这3步,还有3步

上一篇 vuex其实超简单,只需3步 简单介绍了vuex的3步入门,不过为了初学者容易消化,我削减了很多内容,这一节,就是把少掉的内容补上, 如果你没看过上篇,请戳链接过去先看一下再回来,否则,你会觉...

Noahlam
05/21
0
0
Vue进阶(四):使用 Vuex + axios 发送请求

Vue进阶(四):使用 Vuex + axios 发送请求 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。 目前主流的 Vue 项目,都选择...

sunhuaqiang1
05/05
0
0
大型Vuex应用程序的目录结构

译者按: 听前端大佬聊聊Vuex大型项目架构的经验 原文: Large-scale Vuex application structures 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译...

Fundebug
06/13
0
0
vuex实现路由切换动画同时嵌套路由同样使用

示例 http://47.94.90.89/dist/#/aaa 一、安装vue-cli 1 下载安装node.js 2 npm install -g cnpm --registry=https://registry.npm.taobao.org 换源 3 cnpm install -g vue-cli 全局安装vue......

任倩坤
05/18
0
0
Vue进阶(五):与 Vuex 的第一次接触

Vue进阶(五):与 Vuex 的第一次接触 在 Vue.js 的项目中,如果项目结构简单,父子组件之间的数据传递可以使用 props 或者 $emit 等方式 (详参博文《Vue进阶(六):组件之间的数据传递》)...

sunhuaqiang1
05/05
0
0
从概念到实际项目__vuex指北

1,核心概念 1.1 State: 用于数据的存储,是store中的唯一数据源,类似vue中data对象. 单一状态树:用一个对象就包含了所有应用层级状态.每个应用就只包含一个store实例. 计算属性:由于Vuex的状...

suchName
06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MyBatis源码解读之延迟加载

1. 目的 本文主要解读MyBatis 延迟加载实现 2. 延迟加载如何使用 Setting 参数配置 设置参数 描述 有效值 默认值 lazyLoadingEnabled 延迟加载的全局开关。当开启时,所有关联对象都会延迟加...

无忌
1分钟前
0
0
javascript 类变量的实现

代码如下: function echo(){ for(let i=0;i<arguments.length;i++) console.log(arguments[i]);}function extend(o, p){for (prop in p) {o[prop] = p[prop]}retur......

backbye
5分钟前
0
1
编程语言对比分析:Python与Java和JavaScript(图)

编程语言对比分析:Python与Java和JavaScript(图): 凭什么说“Python 太慢,Java 太笨拙,我讨厌 JavaScript”?[图] 编程语言生而为何? 我们人类从原始社会就是用语言表达自己,互相沟通...

原创小博客
13分钟前
0
0
Akka构建Reactive应用《one》

看到这Akka的官网,描述使用java或者scala构建响应式,并发和分布式应用更加简单,听着很高级的样子,下面的小字写着消息驱动,但是在quickstart里面又写容错事件驱动,就是这么钻牛角尖。 ...

woshixin
25分钟前
0
0
ffmpeg源码分析 (四)

io_open 承接上一篇,对于avformat_open_input的分析还差其中非常重要的一步,就是io_open,该函数用于打开FFmpeg的输入输出文件。 在init_input中有这么一句 if ((ret = s->io_open(s, &s-...

街角的小丑
27分钟前
0
0
String,StringBuffer ,StringBuilder的区别

不同点 一、基类不同 StringBuffer、StringBuilder 都继承自AbStractStringBuilder,String 直接继承自 Object 2、底层容器“不同” 虽然底层都是字符数组,但是String的是final修饰的不可变...

不开心的时候不要学习
42分钟前
0
0
nodejs 文件操作

写文件code // 加载文件模块var fs = require("fs");var content = 'Hello World, 你好世界!';//params 文件名,内容,编码,回调fs.writeFile('./hello.txt',content,'utf8',function (er......

yanhl
44分钟前
0
0
SpringBoot mybits 查询为0条数据 但是在Navicat 中可以查询到数据

1.页面请求: 数据库查询: 2018-07-16 17:56:25.054 DEBUG 17312 --- [nio-9010-exec-3] c.s.h.m.C.selectSelective : ==> Preparing: select id, card_number, customer_id, customer_nam......

kuchawyz
54分钟前
0
0
译:Self-Modifying cod 和cacheflush

date: 2014-11-26 09:53 翻译自: http://community.arm.com/groups/processors/blog/2010/02/17/caches-and-self-modifying-code Cache处在CPU核心与内存存储器之间,它给我们的感觉是,它具......

我叫半桶水
56分钟前
0
0
Artificial Intelligence Yourself

TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理。Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流图的计算,TensorFlow为张量从流...

孟飞阳
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部