vuex学习之Actions的用法详解
2017-08-29 09:46
731 查看
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态. Action 是异步的,mutation是同步的。
沿用vuex学习---简介的案例:这里是加10 减1
1.在store.js 中 代码为:
import Vue from 'vue' import Vuex from 'vuex' //使用vuex模块 Vue.use(Vuex); //声明静态常量为4 const state = { count : 4 }; const mutations = { add(state,n){ state.count +=n.a; }, sub(state){ state.count--; } }; const actions = { //2种书写方式 addplus(context){ //可以理解为代表了整个的context context.commit('add',{a:10}) }, subplus({commit}){ commit('sub'); } }; //导出一个模块 export default new Vuex.Store({ state, mutations, actions })
2.在App.vue中 代码如下:
<template> <div id="app"> <div id="appaaa"> <h1>这是vuex的示例</h1> <p>组件内部count{{count}}</p> <p> <button @click = "addplus">+</button> <button @click = "subplus">-</button> </p> </p> </div> </div> </template> <script> //引入mapGetters import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default { name:'app', data(){ return { } }, computed:{ ...mapState([ "count" ]), }, methods:{ ...mapActions([ "addplus", "subplus" ]) } } </script> <style> </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- OpenCV学习之CvMat的用法详解及实例(二)
- Java学习总结之第十六章 Socket用法详解
- vuex学习六----actions
- Nodejs学习之net模块相关用法详解
- Python学习:纠错笔记:详解os.removedirs(path)的正确用法
- C++学习 STL之六:map/multimap用法详解
- C语言再学习 -- Xargs用法详解
- OpenCV学习之CvMat的用法详解及实例(三)
- 【Java学习笔记之三十三】详解Java中try,catch,finally的用法及分析
- jQuery学习之jQuery Ajax用法详解
- Symfony2框架学习笔记之HTTP Cache用法详解
- OpenCV学习之CvMat的用法详解及实例(三)
- linux wget 命令用法详解(全解+实例说明)-【linux学习笔记】
- jQuery学习之jQuery Ajax用法详解
- C++学习笔记(七):string类用法及使用大全——在C++11下的使用详解
- jQuery学习之jQuery Ajax用法详解
- 学习笔记之 curl 命令用法详解
- Java学习笔记之Pattern类的用法详解(正则表达式)
- Symfony2学习笔记之模板用法详解
- C++学习 STL之一:字符串用法详解