文档章节

vuex

大美琴
 大美琴
发布于 06/25 18:46
字数 259
阅读 10
收藏 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>

 

本文转载自:

共有 人打赏支持
上一篇: vuex学习
下一篇: VConsole的使用
大美琴
粉丝 4
博文 54
码字总数 20191
作品 0
宁德
程序员
私信 提问
真正掌握vuex的使用方法(一)

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

张培跃
05/17
0
0
vuex组件 vuex-persistedstate

vuex用于管理项目中的全局状态,但是我们一刷新vuex中保存的全局状态就会被全部初始化,虽然我们也可以同事缓存到storage中做两步操作,但是vuex-persistedstate组件已经帮我们完成了同步更新...

donggggg
05/28
0
0
Vue 应用单元测试的策略与实践 04 - Vuex 单元测试

Vue 应用单元测试的策略与实践 04 - Vuex 单元测试 一个有基本的UT知识和Vue组件单元测试经验的开发者🚶// When当他🚶阅读和练习本文的Vuex单元测试的部分// Then他能够对Vuex概念的理解...

吕立青
11/02
0
0
理解vuex -- vue的状态管理模式

vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。...

wenxingjun
07/25
0
0
Vuex持久化插件-解决刷新数据消失的问题

vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的。怎么解决呢,我们可以结合本地存储做到数据持久化,也可以通过插件-vuex-persistedstate。 欢迎来点点我的个...

hollyDysania
08/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
3
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
1
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
4
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
3
0
聊聊storm trident batch的分流与聚合

序 本文主要研究一下storm trident batch的分流与聚合 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout) .p......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部