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

Question

将 Vuex localcomputed 对象与 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([])

    }

如何将这两者结合起来？

Answer 1

您正在尝试在 localComputed.

中定义 localMethod

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

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

computed: {

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

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

  ...mapState([]),

  ...mapGetters([])

}

Answer 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 绑定应该可以工作了。

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

Vuex syntax error with localcomputed function in combination with getter and setter

javascript

vue.js

vuex