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 + "次!"
        }
    }
})

组件中的使用：

<template>
    <div class="app">
        <h1>this is an product1 page</h1>
        <p> {{getSize}}</p>
        <p> {{stringSize}}</p>
         <p><button @click="add(10)">Add</button></p>
        <p><button @click="dec">Dec</button></p>
    </div>

</template>

<script>
    import {mapGetters} from 'vuex';
    import {mapMutations} from 'vuex';
    import {mapActions} from 'vuex';
    export default {
        name: "Product1",
        computed: {
            ...mapGetters(['getSize', 'stringSize'])
        },
        methods: {
            ...mapMutations(['add', 'dec']),
            ...mapActions(['asyncAdd', 'asyncDec'])
        }
    }

</script>

<style scoped lang="stylus">
    .app
        background #ccab3c

    ul, li
        list-style none
</style>