文档章节

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>

 

本文转载自:

共有 人打赏支持
大美琴
粉丝 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
Vuex持久化插件-解决刷新数据消失的问题

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

hollyDysania
08/02
0
0
理解vuex -- vue的状态管理模式

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

wenxingjun
07/25
0
0
真正掌握vuex的使用方法(二)

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

张培跃
05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用xtrabackup完成远程备份

转载收藏,以防丢失 需求 Can I backup remote databases from my local server02-27-2013, 06:17 AMHi, I am using mysqldump so far for taking daily backups of my Production datab......

阿dai
22分钟前
1
0
OSChina 周五乱弹 —— 心情超级好开始乱删库

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Charli XCX的单曲《Boom Clap》 《Boom Clap》—— Charli XCX 手机党少年们想听歌,请使劲儿戳(这里) 把生命除去上班时间,...

小小编辑
23分钟前
8
7
为什么你的python版本一团糟?因为少了这个操作

坑人的版本 Python 的版本问题一直是个广被吐槽的黑点。以至于有人调侃说: Python 是世界上最好的两种语言! 在这里我要说明下,对于初学者来说,版本间的语法差异其实并不大。现在刚开始学...

crossin
昨天
2
1
Cannot forward after response has been committed

声名:转载自CSDN 通过toncat启动服务器,可以正常登陆访问,登陆进去选择子系统的时候点击登陆的时候,可是去又回到了登陆界面,如此反复就是不能够进入子系统,查看后台报的错误: java.la...

小橙子的曼曼
昨天
2
0
shell编程(告警系统邮件引擎、运行告警系统)

告警系统邮件引擎 1.如果要使用邮件引擎功能,需要调用mail.py文件,放到/usr/local/sbin/mon/mail/目录下即可,具体内容如下: #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,s...

蛋黄_Yolks
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部