项目代码结构↓

src内容↓

store内容↓

理解思路: component中的组件发送修改请求,由action.js处理请求,mutation修改请求,修改请求后state改变,从getter.js中可获取更新后的state中的数据。

state.js中为初始数据

const state={
count:0
}; export default state;

action.js中的内容

import * as types from './types';

const actions={
increment:({
commit,state
},payload)=>{
// alert(payload);
payload=payload||1;
commit(types.INCREMENT,payload);
},
decrement:({
commit,state
})=>{
commit(types.DECREMENT);
},
async:({
commit,state
})=>{
setTimeout(()=>{//请求数据
commit(types.INCREMENT);
},1000);
},
odd:({
commit,state
})=>{
if(state.count % 2 == 0){
commit(types.INCREMENT);
}
}
}; export default actions;

mutation.js的内容

import {
INCREMENT,
DECREMENT
} from './types'; const mutations={
[INCREMENT]:(state,payload)=>{
// alert(payload);
payload=payload||1;
state.count+=payload;
},
[DECREMENT]:(state)=>{
state.count--;
}
}; export default mutations;

type.js的内容

export const INCREMENT='INCREMENT'; //加  描述
export const DECREMENT='DECREMENT'; //减 描述

getter.js的内容

const getters={
count:(state)=>{
return state.count;
}
}; export default getters;

在App.vue(或其他组件)中获取、修改state中的状态↓

<template>
<div id="app">
<h1>vuex</h1>
<input type="button" value="+" @click="increment(2)">
<input type="button" value="-" @click="decrement">
<input type="button" value="异步+" @click="async">
<input type="button" value="偶数+" @click="odd">
<br/>
越过getters向state拿:{{$store.state.count}}
<br/>
{{count}}/{{count%2==0?'双数':'单数'}}
<br/>
<input type="button" value="修改私有数据" @click="check">
<br/>
{{n}}
</div>
</template> <script>
import {mapActions,mapGetters} from 'vuex';
export default {
name: 'app',
data () {
return {
n:0
}
},
methods:{ // 私有方法和 请求并存
check(){
this.n='bmw';
},
...mapActions(
['increment','decrement','async','odd']
)

},
computed:mapGetters(
['count']
),
mounted(){
//代码里面直接发请求 actions
// this.$store.dispatch('increment',121); //代码里面直接发请求 mutations
// this.$store.commit('INCREMENT',['apple','banana','orange','西游记']); }
}
</script> <style> </style>

  

vuex使用示例的更多相关文章

  1. 超简单入门Vuex小示例

    写在前面 本文旨在通过一个简单的例子,练习vuex的几个常用方法,使初学者以最快的速度跑起来一个vue + vuex的示例. 学习vuex需要你知道vue的一些基础知识和用法.相信点开本文的同学都具备 ...

  2. vuex简单示例

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

  3. vue全家桶+Koa2开发笔记(1)--vuex

    1.  安装webpack的问题: webpack坑系列--安装webpack-cli 2.  vue-cli(vue脚手架)超详细教程 3.  在命令行中使用 touch 执行新建文件: 4.  关 ...

  4. 通俗理解vuex原理---通过vue例子类比

    本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用 vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以 ...

  5. vuex的简单例子和vue model组件

    好久没用过vuex了,vuex官方示例的计算器counter是用的webpack打包了单文件组件,不方便回顾,今天把代码改成了html引人的方式,方便回顾 <!DOCTYPE html> ...

  6. 举个例子去理解vuex(状态管理),通俗理解vuex原理,通过vue例子类比

    通俗理解vuex原理---通过vue例子类比   本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...

  7. 快速理解 VUEX 原理

    1. vuex 的作用: vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以存取仓库中的数据. 2. vuex 流程和 vue 类比: 我们看一下一个简单的vu ...

  8. vuex2.0+两个小例子

    首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各核心概念的理解. 废话少说,直接上干货.这是官网上的一 ...

  9. vuex-Actions的用法

    Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 是异步的,mutation是同步的. 沿用vuex学习---简介的案例 ...

随机推荐

  1. snpeff注释变异(variants)

    1.进入网站http://snpeff.sourceforge.net/,下载snpeff: wget http://sourceforge.net/projects/snpeff/files/snp ...

  2. Linux:在文件最后一列添加递增数(awk,cat函数)

    假设有文件file1.txt: aa eeeee bb eeeee cc eeeee dd eeeee 先修改为: aa eeeee 1 bb eeeee 2 cc  eeeee3 dd eeeee ...

  3. GitLab 环境搭建【CentOS7】

    RPM安装方式 https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7 [最好给服务器分配至少4G内存] 先检查一下依赖:sshd [root@l ...

  4. java基础入门-语法(1)

    因为平时用到一些java的项目,比如ElasticSearch,zookeeper等,有时也想看看里面怎么实现的,或者看到别人分析原理时候会用到java源码, 自己也想跟着学一下,最起码能看懂别人的分 ...

  5. phpStudy 5.5n +zendstudio12.5+xDebugger的配置

    1.之前一直安装zendDebugger都没装上去,用phpStudy版本转换器转到对应版本的ZendDebuger也没用,后来发现自己下载的zendstudio的php是5.5的,而且自带了zend ...

  6. Mysql连接查询、子查询、联合查询 整理

    连接查询 连接语法的基本形式 from 表1  [连接方式]  join 表2  [on 连接条件]: 交叉连接 语法: from  表1  [cross]  join  表2  ;      //可 ...

  7. jmeter源码导入eclipse步骤

    1.新建标准java项目2.右击项目选import filesystem 将apache-jmeter-4.0整个目录勾选allow output folders for source folders ...

  8. [DUBBO] Unexpected error occur at send statistic, cause: Forbid consumer 192.168.3.151 access servic

    [DUBBO] Unexpected error occur at send statistic, cause: Forbid consumer 192.168.3.151 access servic ...

  9. 图论分支-差分约束-SPFA系统

    据说差分约束有很多种,但是我学过的只有SPFA求差分: 我们知道,例如 A-B<=C,那么这就是一个差分约束. 比如说,著名的三角形差分约束,这个大家都是知道的,什么两边之差小于第三边啦,等等等 ...

  10. GlusterFS分布式文件系统部署及基本使用(CentOS 7.6)

    GlusterFS分布式文件系统部署及基本使用(CentOS 7.6) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Gluster File System 是一款自由软件,主要由 ...