vuex使用示例
项目代码结构↓
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使用示例的更多相关文章
- 超简单入门Vuex小示例
写在前面 本文旨在通过一个简单的例子,练习vuex的几个常用方法,使初学者以最快的速度跑起来一个vue + vuex的示例. 学习vuex需要你知道vue的一些基础知识和用法.相信点开本文的同学都具备 ...
- vuex简单示例
一.vuex是什么,解决了什么问题? 官方解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生 ...
- vue全家桶+Koa2开发笔记(1)--vuex
1. 安装webpack的问题: webpack坑系列--安装webpack-cli 2. vue-cli(vue脚手架)超详细教程 3. 在命令行中使用 touch 执行新建文件: 4. 关 ...
- 通俗理解vuex原理---通过vue例子类比
本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用 vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以 ...
- vuex的简单例子和vue model组件
好久没用过vuex了,vuex官方示例的计算器counter是用的webpack打包了单文件组件,不方便回顾,今天把代码改成了html引人的方式,方便回顾 <!DOCTYPE html> ...
- 举个例子去理解vuex(状态管理),通俗理解vuex原理,通过vue例子类比
通俗理解vuex原理---通过vue例子类比 本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...
- 快速理解 VUEX 原理
1. vuex 的作用: vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以存取仓库中的数据. 2. vuex 流程和 vue 类比: 我们看一下一个简单的vu ...
- vuex2.0+两个小例子
首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各核心概念的理解. 废话少说,直接上干货.这是官网上的一 ...
- vuex-Actions的用法
Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 是异步的,mutation是同步的. 沿用vuex学习---简介的案例 ...
随机推荐
- snpeff注释变异(variants)
1.进入网站http://snpeff.sourceforge.net/,下载snpeff: wget http://sourceforge.net/projects/snpeff/files/snp ...
- Linux:在文件最后一列添加递增数(awk,cat函数)
假设有文件file1.txt: aa eeeee bb eeeee cc eeeee dd eeeee 先修改为: aa eeeee 1 bb eeeee 2 cc eeeee3 dd eeeee ...
- GitLab 环境搭建【CentOS7】
RPM安装方式 https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7 [最好给服务器分配至少4G内存] 先检查一下依赖:sshd [root@l ...
- java基础入门-语法(1)
因为平时用到一些java的项目,比如ElasticSearch,zookeeper等,有时也想看看里面怎么实现的,或者看到别人分析原理时候会用到java源码, 自己也想跟着学一下,最起码能看懂别人的分 ...
- phpStudy 5.5n +zendstudio12.5+xDebugger的配置
1.之前一直安装zendDebugger都没装上去,用phpStudy版本转换器转到对应版本的ZendDebuger也没用,后来发现自己下载的zendstudio的php是5.5的,而且自带了zend ...
- Mysql连接查询、子查询、联合查询 整理
连接查询 连接语法的基本形式 from 表1 [连接方式] join 表2 [on 连接条件]: 交叉连接 语法: from 表1 [cross] join 表2 ; //可 ...
- jmeter源码导入eclipse步骤
1.新建标准java项目2.右击项目选import filesystem 将apache-jmeter-4.0整个目录勾选allow output folders for source folders ...
- [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 ...
- 图论分支-差分约束-SPFA系统
据说差分约束有很多种,但是我学过的只有SPFA求差分: 我们知道,例如 A-B<=C,那么这就是一个差分约束. 比如说,著名的三角形差分约束,这个大家都是知道的,什么两边之差小于第三边啦,等等等 ...
- GlusterFS分布式文件系统部署及基本使用(CentOS 7.6)
GlusterFS分布式文件系统部署及基本使用(CentOS 7.6) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Gluster File System 是一款自由软件,主要由 ...