vuex代码笔记

store.js文件:

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        size: 5
    },
    mutations: { //同步执行
        add: function (state,param) { //传参
            state.size = state.size+param
            return state.size;
        },
        dec: function (state) {
            return state.size--;
        }
    },
    actions: {//异步执行
        asyncAdd:function (context,param) {
            context.commit('add',param)
        },
        asyncDec:function (context) {
            context.commit('dec')
        },
    },
    getters: {
        getSize: function (state) {
            return state.size * 2;
        },
        stringSize: function (state) {
            return state.size + "次!"
        }
    }
})

组件中的使用:





 

你可能感兴趣的:(vue,前端)