vue.js - 带有 setter 的 mapState

Question

我想通过 mapState 分配 setter 方法。我目前使用一种变通方法，将我感兴趣的变量 (todo) 命名为临时名称 (storetodo)，然后在另一个计算变量 中引用它>待办事项。

methods: {
    ...mapMutations([
        'clearTodo',
        'updateTodo'
    ])
},
computed: {
    ...mapState({
        storetodo: state => state.todos.todo
    }),
    todo: {
        get () { return this.storetodo},
        set (value) { this.updateTodo(value) }
    }
}

我想跳过额外的步骤并直接在 mapState 中定义 getter、setter。

我为什么要这样做？

通常的方法是使用mapMutations/mapActions & mapState/mapGetters没有我上面说明的计算得到/设置组合并直接在 HTML 中引用突变:

<input v-model='todo' v-on:keyup.stop='updateTodo($event.target.value)' />

getter/setter 版本允许我简单地写:

<input v-model='todo' />

Answer 1

您不能在 mapState 中使用 getter/setter 格式

您可以尝试直接在 get() 中返回状态并从计算属性中删除 mapState

computed: {
    todo: {
        get () { return this.$store.state.todos.todo},
        set (value) { this.updateTodo(value) }
    }
} 

这是一个相关但不相同的 JsFiddle example