Vuex 语法错误与 localcomputed 函数结合 getter 和 setter

Posted 2023-02-23

【中文标题】Vuex 语法错误与 localcomputed 函数结合 getter 和 setter

【英文标题】：Vuex syntax error with localcomputed function in combination with getter and setter

【发布时间】：2018-05-07 21:13:05

【问题描述】：

将 Vuex 本地计算对象与 get/set 以及存储映射结合使用时出现语法错误。

正如在 Vuex 文档中看到的，您可以像这样使用对象传播操作符映射您的存储方法，例如：

computed: 
  localComputed ()  /* ... */ ,
  // mix this into the outer object with the object spread operator
  ...mapState(
    // ...
  )

https://vuex.vuejs.org/en/state.html##object-spread-operator

您还可以创建计算设置器，例如：

computed: 
  fullName: 
    // getter
    get: function () 
      return this.firstName + ' ' + this.lastName
    ,
    // setter
    set: function (newValue) 
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    
  

https://vuejs.org/v2/guide/computed.html#Computed-Setter

我可以使用 get set 或 mapState/mapGetters 等创建计算对象 - 但不能组合使用。它破坏了语法（错误是：函数声明后的预期函数名）。

    computed: 
        localComputed () 
            localMethod: 
                get: function () 
                        // retrieve
                ,
                set: function (newContent) 
                    // set
                
            
        , ...mapState([

                       ]), ...mapGetters([])

    

如何将这两者结合起来？

【参考方案1】：

您正在尝试在 localComputed 中定义 localMethod。

在文档中，localComputed 只是组件中计算属性的示例名称。您不必将所有其他本地计算属性都放入其中。

因此，您应该能够做到以下几点：

computed: 

  localComputed: 
    get: function () 
      // retrieve
    ,
    set: function (newContent) 
      // set
    
  ,

  anotherLocalComputed: 
    get: function () 
      // retrieve
    ,
    set: function (newContent) 
      // set
    
  ,

  ...mapState([]),

  ...mapGetters([])

【讨论】：

我正在尝试这个并且仍然收到SyntaxError, Unexpected token mapState(['myStateVar'])。没有 mapstate mixin 它运行。

【参考方案2】：

这是工作示例。我已经使用这种方法一年多了

// in some utils/vuex.js file 
export const mapSetter = (state, setters = ) => (
  Object.keys(state).reduce((acc, stateName) => 
    acc[stateName] = 
      get: state[stateName],
   ;
   // check if setter exists
   if (setters[stateName]) 
      acc[stateName].set = setters[stateName];
   

   return acc;
 , )
);

在你的 component.vue 文件中

  import  mapSetter   from 'path/to/utils/vuex.js';
  ...

  export default 
    name: 'ComponentName',
    computed: 
      ...mapSetter(
        mapState(
          result: ( ITEMS ) => ITEMS.result,
          total: ( ITEMS ) => ITEMS.total,
          current: ( ITEMS ) => ITEMS.page,
          limit: ( ITEMS ) => ITEMS.limit,
        ),
        
          limit(payload) 
            this.$store.dispatch( type: TYPES.SET_LIMIT, payload );
          ,
        ,
      )
    ,
  

现在 v-model 绑定应该可以工作了。