App.vue

<div>
<template>
    <div id="app">
        <div>
            <button @click="dataC(parseInt(Math.random() * 10))">arr-create</button>
            <button @click="dataD(1)">arr-delete</button>
            <button @click="dataU({s:0, d:666})">arr-update</button>
        </div>
        <div>
            <button @click="dD(1)">dDelete</button>
            <button @click="dC(parseInt(Math.random() * 10))">dCreate</button>
            <button @click="dU({s:0, d:666})">dUpdate</button>
        </div>
        <div>{{getterArr}}</div>
        <div>{{arr}}</div>
    </div>
</template>

<script>
    import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
    import {ARRUPD, ARRDEL, ARRCRE} from "./store/mutation-types";

    export default {
        name: 'App',
        computed: {
            ...mapGetters(['getterArr']),
            ...mapState(['arr']),
        },
        methods: {
            ...mapActions(['dataC','dataD','dataU']),
            ...mapMutations({dD: ARRDEL, dC: ARRCRE, dU: ARRUPD}),
        },
    }
    // 传统操作方法
    // getters:      return this.$store.getters.getterArr;
    // state:        return this.$store.state.arr;
    // actions:      this.$store.dispatch('dataD', 0)
    // mutations:    this.$store.commit(ARRDEL, 1)
</script>

state.js

export default {
    arr:[]
}

getters.js

export default {
    getterArr(state) {
        return state.arr.map(value => value * 2);
    }
}

mutations.js

import {ARRCRE, ARRDEL, ARRUPD} from './mutation-types'
export default {
    [ARRCRE](state, payload){
        state.arr.push(payload);
    },
    [ARRDEL](state, payload){
        state.arr.splice(payload, 1)
    },
    [ARRUPD](state, payload){
        state.arr.splice(payload.s, 1, payload.d)
    }
}

actions.js

import {ARRUPD, ARRDEL, ARRCRE} from "./mutation-types";
export default {
    dataC(context, payload) {
        context.commit(ARRCRE, payload);
    },
    dataD(context, payload) {
        context.commit(ARRDEL, payload);
    },
    dataU(context, payload) {
        context.commit(ARRUPD, payload);
    }
}

mapState三种写法

<script>
    import {mapState} from 'vuex'

    export default {
        computed: {
            // 日常写法
            account() {
                return this.$store.state.account
            },
            password() {
                return this.$store.state.password
            },
            age() {
                return this.$store.state.age
            },
            other: () => "other"
        },
        computed: {
            // 子模块的属性因有了命名空间 无法使用数组 magic
            // 但 mutations 没有命名空间概念 所以要保证全局唯一性 否则会被覆盖
            ...mapState({
                userName: state => state.user.name,
                userAge: state => state.user.age
            })
            // magic style1
            ...mapState(['account', 'password', 'age']),
            other: () => "other"
        },
        computed: {
            // magic style2 自定义属性法名
            ...mapState({
                account: 'account',
                password: 'password',
                age: 'age',
            }),
            other: () => "other"
        },
        computed: {
            // magic style3 更多灵活处理
            ...mapState({
                account: (state) => { // account: state => state.account | account(state) {} 
                    return state.account
                },
                password: (state) => { // password: state => state.age | password(state) {}
                    return state.password
                },
                age: (state) => { // age: state => state.age | age(state) {} 
                    return state.age
                }
            }),
            other: () => "other"
        }
    }
</script>

mapMutations三种写法

<script>
    import {mapMutations} from 'vuex'

    export default {
        methods: {
            // 日常写法
            account(account) {
                this.$store.commit("account", account)
            },
            password(password) {
                this.$store.commit("password", password)
            },
            age(age) {
                this.$store.commit("age", age)
            },
            otherMethods() {
            }
        },
        methods: {
            // magic style1
            // 注意这里引入了子模块 user 的两个 mutations 方法 没有命名空间限制
            ...mapMutations(['account', 'password', 'age', 'setUserName', 'setUserAge']),
            otherMethods() {
            }
        },
        methods: {
            // magic style2 自定义方法名
            ...mapMutations({
                account: 'account',
                password: 'password',
                age: 'age',
            }),
            otherMethods() {
            }
        },
        methods: {
            // magic style3 更多灵活处理
            ...mapMutations({
                account: (commit, account) => {
                    commit("account", account)
                },
                password: (commit, password) => {
                    commit("password", password)
                },
                age: (commit, age) => {
                    commit("age", age)
                }
            }),
            otherMethods() {
            }
        }
    }
</script>