vuex commit 模块_一分钟上手Vuex

Vuex介绍

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

五大特性

状态state、计算属性getter、同步行为mutation、异步行为action、模块module

例子

定义一个计数，同步方法时，点击立刻增加或减少1，异步方法时，点击延迟1秒增加或减少1。根据当前计数的值，显示偶数或者奇数。

store计数器应用

1. 在state状态属性中，定义count属性，默认值为0；

2. 在getters计算属性中，定义isEvent属性，判断奇偶性；

3. 在mutations同步行为中，定义increment自增方法，定义decrement自减方法；

4. 在action异步行为中，定义asyncIncrement延迟1秒自增方法，定义asyncDecrement延迟1秒自减方法；

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
state: {
count: 0
    },
getters: {
isEven: state => {
return state.count % 2 == 0;
        }
    },
mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state){
            state.count--;
        }
    },
actions: {
        asyncIncrement({ commit, state }){
            setTimeout(()=>{
                commit('increment');
            }, 1000);
        },
        asyncDecrement({ commit, state }){
            setTimeout(()=>{
                commit('decrement');
            }, 1000);
        }
    }
});

export default store;

vue计数器应用

1. 在data状态属性中，定义了source来源属性，默认值为qianduanka；

2. 在computed计算属性中，定义了count、isEven来源于store的状态属性及计算属性；

3. 在methods方法中，定义了事件行为同步方法increment、decrement，异步方法asyncIncrement、asyncDecrement；

4. 事件行为中，commit用于同步调用，dispatch用于异步调用；

import { mapState, mapGetters } from 'vuex';
export default {
    data() {
return {
source: 'qianduanka',
        }
    },
computed: {
        ...mapState(['count'])
        ...mapGetters(['isEven'])
    },
methods: {
        increment() {
this.$store.commit('increment');
        },
        decrement() {
this.$store.commit('decrement');
        },
        asyncIncrement() {
this.$store.dispatch('asyncIncrement');
        },
        asyncDecrement() {
this.$store.dispatch('asyncDecrement');
        }
    }
}

vue计数器模板

<div class='hello'>
<div>一分钟上手Vuex —— 前端咖div>
<div>计数：{{ count }}div>
<div>{{isEven?'偶数':'奇数'}}div>
<div>
<input type='button' value='同步增加' @click='increment'>
<input type='button' value='同步减少' @click='decrement'>
div>
<div>
<input type='button' value='异步增加' @click='asyncIncrement'>
<input type='button' value='异步减少' @click='asyncDecrement'>
div>
div>

一个计数自增自减、判断奇偶属性的应用诞生了，赶快试一试了，一分钟快速上手Vuex就这么容易，妈妈在也不用担心我的学习啦，so easy！

亲，交个朋友哦，加好友(mhappy20180808)前端咖，一起学习，一起成长，我在等你哦！

前端咖，值得关注，在看哦