mapState-mapMutations-的使用方法

Vue 引入 Vuex

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        account: "",
        password: "",
        age: 0
    },
    mutations: {
        account(state, account) {
            state.account = account;
        },
        account(state, password) {
            state.password = password;
        },
        account(state, age) {
            state.age = age;
        },
    }
})

export default store

挂载至 Vue

import Vue from 'vue'
import App from './App'

import store from './store'

Vue.config.productionTip = false

Vue.prototype.$store = store

const app = new Vue({
    store,
    ...App
})
app.$mount()

页面引用 Vuex

使用 mapState, mapMutations 魔术方法导入

mapState

// ....
<script>
    import {mapState} 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
            ...mapMutations(['account', 'password', 'age']),
            otherMethods() {
            }
        },
        methods: {
            // magic style2 自定义方法名
            ...mapMutations({
                account: 'account',
                password: 'password',
                age: 'age',
            }),
            otherMethods() {
            }
        },
        methods: {
            // magic style3 更多灵活处理
            ...mapMutations({
                account: (state, account) => {
                    state.commit("account", account)
                },
                password: (state, password) => {
                    state.commit("password", password)
                },
                age: (state, age) => {
                    state.commit("age", age)
                }
            }),
            otherMethods() {
            }
        }
    }
</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
            ...mapMutations(['account', 'password', 'age']),
            otherMethods() {
            }
        },
        methods: {
            // magic style2 自定义方法名
            ...mapMutations({
                account: 'account',
                password: 'password',
                age: 'age',
            }),
            otherMethods() {
            }
        },
        methods: {
            // magic style3 更多灵活处理
            ...mapMutations({
                account: (state, account) => {
                    state.commit("account", account)
                },
                password: (state, password) => {
                    state.commit("password", password)
                },
                age: (state, age) => {
                    state.commit("age", age)
                }
            }),
            otherMethods() {
            }
        }
    }
</script>