如何在VSCode中快速生成Vuex Getter和Setter？含计算属性内生成方法

当然有办法！作为经常用VSCode开发Vue项目的人，我整理了几个实用的方案，帮你快速生成Vuex的Getter和Setter，尤其是在计算属性里：

你可以自己创建专属的代码片段，以后一键生成带Vuex Getter和Setter的计算属性：

1. 打开VSCode命令面板（快捷键Ctrl+Shift+P，Mac是Cmd+Shift+P）
2. 输入Configure User Snippets，选择vue.json（如果没有就新建一个）
3. 粘贴以下配置：

{
  "Vuex Computed Getter & Setter": {
    "prefix": "vuex-computed",
    "body": [
      "computed: {",
      "  ${1:propertyName}: {",
      "    get() {",
      "      return this.$store.getters['${2:moduleName}/${3:getterName}']",
      "    },",
      "    set(value) {",
      "      this.$store.commit('${2:moduleName}/${4:mutationName}', value)",
      "    }",
      "  }",
      "}"
    ],
    "description": "快速生成绑定Vuex的计算属性（带get和set）"
  }
}

之后在Vue文件的script标签里输入vuex-computed，按Tab键就能生成模板，还可以通过Tab键切换propertyName、moduleName等占位符，快速修改成你需要的内容。

推荐两个Vue开发必备的插件，能大幅提升效率：

• Vetur：这是Vue开发者几乎人手一个的插件，它自带了Vuex相关的快捷片段。比如输入vuxg可以快速生成mapGetters的映射，输入vuxs生成mapState；如果需要带Setter的计算属性，你可以先生成基础结构，再补充set部分，结合VSCode的智能提示非常顺手。
• Vue VSCode Snippets：这个插件提供了更丰富的Vuex专属快捷方式，比如输入computed-vuex就能直接生成带get和set的计算属性模板，绑定Vuex的getter和mutation，你只需要替换对应的名称即可。

如果不想折腾插件或片段，利用VSCode的智能提示也能快速写出来：

• 先写出计算属性的基础结构：

computed: {
  targetProp: {
    get() {},
    set(value) {}
  }
}

• 在get()里输入this.$store.getters.，VSCode会自动弹出所有可用的getter列表，直接选择你需要的就行；
• 在set(value)里输入this.$store.commit.，同样会弹出所有mutation的提示，选中后把value作为参数传进去就搞定了。

如果组件里需要绑定多个Vuex属性，推荐用mapGetters和mapMutations辅助函数，结合计算属性写法更简洁：

import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    // 批量映射getter
    ...mapGetters('userModule', ['userName', 'userAvatar']),
    // 带Setter的计算属性
    userNameEditable: {
      get() {
        return this.userName
      },
      set(newName) {
        this.updateUserName(newName)
      }
    }
  },
  methods: {
    // 批量映射mutation
    ...mapMutations('userModule', ['updateUserName'])
  }
}

这种写法不仅更清晰，VSCode的智能提示也能识别映射后的属性和方法，输入时会自动提示，效率很高。

内容的提问来源于stack exchange，提问作者Antoine ROBERT