console 命令行工具 X clear

console

// Vue.use(Vuex);

const moduleA = {
    state: () => ({
        a: 'a'
    }),
    mutations: {},
    actions: {}
}

const moduleB = {
    state: () => {
        return {
            b: 'b'
        }
    },
mutations: { },
actions: { }
}

const moduleC = {
    state: () => ({
        c: 'c'
    }),
    mutations: {},
    actions: {}
}

const store = new Vuex.Store({
    state: {
        count: 0,
        greeting: 'Hi Vuex!',
        skillData: [
            {
                name: 'Vue2'
            }, {
                name: 'Vux3'
            }, {
                name: 'Vue3'
            }, {
                name: 'Vux4'
            }
        ]
    },
    getters: {
        skillCount(state, getters) {
            return state.skillData.length
        }
    },
    mutations: {
        incrementM(state) {
            console.log('mutations incrementM called!!');
            state.count++
        }
    },
    actions: {
        incrementA(context) {
            console.log('actions incrementA called!!');
            context.commit('incrementM')
        }
    },
    modules: {
        a: moduleA,
        b: moduleB,
        c: moduleC
    }
});

const { mapState, mapGetters } = Vuex;

const app = new Vue({
    el: '#app',
    store: store,
    data: () => {
        return {
            // greeting: 'Hi Vuex!'
        }
    },
    // computed: {
    //     count() {
    //         return this.$store.state.count;
    //     }
    // },
    // computed: mapState({
    //     count: state => state.count
    // }),
    computed: {
        skill() {
            return [{
                name: 'Vue2'
            }, {
                name: 'Vux3'
            }, {
                name: 'Vue3'
            }, {
                name: 'Vux4'
            }]
        },
        ...mapState({
            count: state => state.count,
            greeting: state => state.greeting,
            skillData: state => state.skillData,
            a: state => state.a.a,
            b: state => state.b.b,
            c: state => state.c.c
        }),
        ...mapGetters(['skillCount'])
    },
    mounted: () => {
        console.log(store.state.count);
    },
    methods: {
        increment() {
            this.$store.commit('incrementM');
            // this.$store.dispatch('incrementA');
        }
    }
})

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vuex3.0</title>
</head>

<body>
	<div id="app">
		<h4>{{ greeting }}</h4>
		<ol>
			<!-- <li v-for="item in skill" :key="item.name">{{ item.name }}</li> -->
			<li v-for="item in skillData" :key="item.name">{{ item.name }}</li>
		</ol>
        <div>skillCount: {{ skillCount }}</div>
		<div>state.count: {{ count }}</div>
        <div>vuex module: moduleA: {{ a }} | moduleB: {{ b }} | moduleC: {{ c }}</div>

		<button @click="increment">+</button>
    </div>
</body>
</html>

* {
    /* margin: 0; */
    /* padding: 0; */
}

body {
    background: lightblue;
}

button {
    padding: 4px 12px;
}

SOURCE

本项目引用的自定义外部资源