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>