Setter 计算属性从存储在 vue.js

Question

我想制作两个从 store.js 获取值的复选框，并通过表单将它们发送到后端：

<label>Notify me 
    <input type="checkbox" v-model="notification" value="notification" />       
</label>

<label>Email me 
    <input type="checkbox" v-model="email" value="email" />     
</label>

我得到计算值属性:

computed: {
  BASE_URL () {
    return this.$store.state.BASE_URL;  
  }, 
  notification () {
    return this.$store.state.notification; 
  },

  email () {
    return this.$store.state.email; 
  }
}

问题是选中复选框不会更改商店中的值，除此之外，我在控制台中收到此警告，例如：

vue.esm.js?65d7:479 [Vue warn]: Computed property "notification" was assigned to but it has no setter.

我知道可以在计算属性中将 setter 定义为 vue.js 文档中的 described，但我不知道该怎么做有多个值要设置，就像我的特殊情况一样。

非常感谢您帮助解决此问题。

Answer 1

要更改 Vuex 状态，您需要一个突变。

如果你有一个突变 setNotification 来改变 notification 状态，你可以在你的组件中配置属性像这样：

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

您现在可以像往常一样使用 v-model="notification" 绑定它。

有关详细信息，请参阅文档中的 Form Handling。

因为这是我在项目中经常做的事情，所以我编写了一个生成计算属性的辅助函数：

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',
    }),
}

Setter 计算属性从存储在 vue.js

Setter for computed property obtained from store in vue.js

vue.js

vuex

Setter 计算 属性 从存储在 vue.js

Setter for computed property obtained from store in vue.js

vue.js

vuex

Setter 计算属性从存储在 vue.js