vuex简单整理

  • index.js:入口文件
  • state.js:存储状态。也就是变量。
  • getters.js:派生状态。也可以理解为set、get中的get。有两个可选参数,state、getters分别可以获取state中的变量和其它getters。和vue中的computed类似。
  • mutations.js:提交状态修改。可以理解为set、get中的set。每一个mutation都有一个字符串的事件类型和回调函数。第一个参数默认为state。vuex中唯一修改state的方式,不支持异步操作。和vue中的methods类似。
  • mutation-types.js:存储于mutations相关的字符串常量,方便检测和管理。
  • actions.js:和mutations类似。支持异步操作,也可以是对mutations的封装。
Mutation:
     ADD_DB(state) {
        state.cartList.forEach(function(item) {
            item.num = 0;
        });
    },
 action
  sortNumStatus: ({
        commit
    }) => {
        commit(types.ADD_DB);
    },
通過action中的commit(xxx)方法觸發mutation中的xxx(state) {state.xxx = xxx} 來更改state中的數據
如何觸發action呢
...mapActions([
    ‘sortNumStatus‘
]),
或者直接
    methods:{
       this.$store.dispath(‘sortNumStatus‘,arr);
    }

getters可以全局操作更改state中數據
getters:
module.exports = {
    getInfos(state) {
        state.cartInfos.total_price = 0;
        state.cartInfos.total_nums = 0;
        return state.cartInfos;
    },
    getCartList(state) {
         return state.cartList;
    }
};
調用getters中的全局的方法
    computed:{
        ...mapGetters([
            ‘xxxxx‘
        ])
    }

  

原文地址:https://www.cnblogs.com/objectjj/p/11097114.html

时间: 2024-10-07 22:50:28

vuex简单整理的相关文章

PHP语言基础简单整理

1.开始结束标记<? ... ?> 2.定义变量:$变量名 例: $str="锦清笋";不需要指明数据类型 3.输出语句:(1)echo "hello world!";---echo命令(2)print();输出语句,是函数,有返回值.输出成功返回1,失败返回0.(3) printf();格式化输出字符串.例:printf("%d,%f",12,12.3); (4)sprintf();格式化拼接字符串,不是输出语句,只能将字符串拼接.

关于数字证书理解的简单整理以及12306网站证书简单分析

首先简单理解一下什么是数字证书.这里是一篇英文文档,描述的很形象.形象的描述了什么是公钥,什么是私钥,如果确保数字证书的可靠性等. 下面,我们看一个应用"数字证书"的实例:https协议.这个协议主要用于网页加密. 一般我们电脑的浏览器中都有一些受信任的证书颁发机构列表, 里边存储的都是一些机构的信息.这些机构都是权威的.当然可以通过安装软件的方式,来增加证书颁发机构,比如中国银行的根证书软件,阿里巴巴的根证书软件.默认我们认为这些软件都是从官网下载的,是绝对的没被篡改的,可靠的.简单

哈希综述的简单整理

刚接触哈希,由于之后有其他工作,所以时间比较紧,只是做了一个简单粗糙的整理,可能还有不少错误.自己先放着,以后如果需要用到hash了在回头重新整理. 哈希综述的简单整理.pdf

MYBATIS 简单整理与回顾

这两天简单整理了一下MyBatis 相关api和jar包这里提供一个下载地址,免得找了 链接:http://pan.baidu.com/s/1jIl1KaE 密码:d2yl A.简单搭建跑项目 2.进行相关xml配置 放在根目录下 3.配置数据库映射文件 这里给个例子文件 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD

图论模板简单整理

唔,图论部分暂时就看到这里了,整理一下最近学的东西 //最短路 //dijkstra void dijkstra() { memset(vis,0,sizeof(vis)); for(int i = 1;i <= n;i++) { d[i] = -1; } d[n] = 1; for(int k = 1;k <= n;k++) { double maxv = -1; int x = n; for(int i = 1;i <= n;i++) if(!vis[i] && d[

java日志的简单整理

最近开始学习java的日志系统管理,发现有好多的日志系统的jar包,感觉很乱,不知道这些jar包的基本功能.上网搜索了几篇文章后,做了一下整理,方便以后查看. 目前的日志系统主要有:commons-loging .log4j .slf4j .LogBack. commons-loging:apache最早提供的日志的门面接口.避免和具体的日志方案直接耦合.类似于JDBC 的api 接口,具体的的JDBC driver 实现由各数据库提供商实现.通过统一接口解耦,不过其内部也实现了一些简单日志方案

vuex简单示例

一.vuex是什么,解决了什么问题? 官方解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.个人理解是因为vue各个组件是相对独立的,要共享数据,就变的很麻烦.vuex就是为了解决各个组件传递数据与共享数据. 二.vuex的核心概念 vuex的核心概念是store,store中包括了state,mutation,action,getter 1.state:需要用到的状态变量2.mut

Mysql数据库部分简单整理

数据库概述什么是数据(Data) 描述事物的符号记录称为数据 什么是数据库数据库即存放数据的仓库,只不过这个仓库是在计算机存储设备上,而且数据是按一定的格式存放的数据库是长期存放在计算机内.有组织.可共享的数据集合.数据库中的数据按一定的数据模型组织.描述和储存,具有较小的冗余度.较高的数据独立性和易扩展性,并可为各种 用户共享 什么是数据库管理系统 累了累了,自己去搜搜吧,没啥意思 数据库服务器.数据管理系统.数据库.表与记录的关系记录:1 xxx 324245234 22(多个字段的信息组成

vuex简单----&gt;复杂----&gt;模块

话不多说,开干. 首先,使用vue-cli3创建一个项目 选择最后一个 选择自己需要的功能,安装之 最终项目的目录如下: 为了使讲解更简单明了,我们修改一下目录下的一些文件,将app.vue下的文件都注释掉,如下图: 现在我们开始一个最简单的vuex应用.打开store.js文件,编辑如下 : 打开App.vue文件,编辑如下: main.js文件不需要做修改,然后启动项目: 最终显示结果如下: 是的,这就是最简单的一个vuex应用了. State 如果世界上任何事情都是如此简单,那这个世界就太