mapState / mapMutations 的使用方法

Vue 引入 Vuex

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

Vue.use(Vuex)

const store = new Vuex.Store({
    // 模块
    modules: {
        user: {
            state: {
                name: "sqrtcat",
                age: 29
            },
            mutations: {
                setUserName(state, userName) {
                    state.name = userName
                },
                setUserAge(state, userAge) {
                    state.age = userAge
                }
            }
        }
    },
    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

传递的是 this.$store.state 属性, 这样就能够省去 this.$store 了

// ....
<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

传递的是 this.$store.commit 属性，这样就能够省去 this.$store 了

// ....
<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>