从 vue.js 中的 store 获得的计算(computed)属性的设置器

要改变Vuex状态，需要进行变异.

如果您有一个用于更改notification状态的变量setNotification，您可以在组件中如下配置属性:

computed: {
    notification: {
        get() { return this.$store.state.notification; },
        set(value) { this.$store.commit('setNotification', value); },
    },
},

现在你可以像往常一样用v-model="notification"绑定到它.

更多信息请参见文档中的Form Handling.

因为这是我在项目中经常做的事情，所以我编写了一个helper函数来生成计算(computed)属性:

function mapStateTwoWay(...args) {
    const result = {};

    if (args.length === 1) {
        for (const prop of Object.keys(args[0])) {
            result[prop] = {
                get() { return this.$store.state[prop]; },
                set(value) { this.$store.commit(args[0][prop], value); },
            };
        }
    } else {
        for (const prop of Object.keys(args[1])) {
            result[prop] = {
                get() { return this.$store.state[args[0]][prop]; },
                set(value) { this.$store.commit(args[0] + '/' + args[1][prop], value); },
            };
        }
    }

    return result;
}

这样使用:

computed: {
    ...mapStateTwoWay({
        notifications: 'setNotifications',
        email: 'setEmail',
    }),

    // Namespaced
    ...mapStateTwoWay('namespace', {
        notifications: 'setNotifications',
        email: 'setEmail',
    }),
}