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

Posted 2023-02-23

【中文标题】从 vue.js 中的 store 获得的计算属性的设置器

【英文标题】：Setter for computed property obtained from store in vue.js

【发布时间】：2018-04-28 12:58:46

【问题描述】：

我想制作两个复选框，从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 一样，但是当有多个值要设置时，我不知道该怎么做，就像在我的特殊情况下一样。

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

【参考方案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',
    ),

【讨论】：

这适用于嵌套对象状态吗？喜欢user.info.shippingAddress.street？

对于嵌套的 namspacing，重写 namspaced getter 如下： 第 1 行：let stateNs = this.$store.state; 第 2 行：args[0].split('/').forEach(nsComp => (stateNs = stateNs[nsComp])); 第 3 行：return stateNs[prop]