vue中computed属性第一次使用get和set，纪念一下

H5女王

已于 2023-02-16 10:41:49 修改

阅读量241

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript 前端

于 2023-02-16 10:34:31 首次发布

本文链接：https://blog.csdn.net/h5_queenstyle12/article/details/129056237

版权

Vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html部分

      <div class="f_right user_role">&nbsp;&nbsp;
          <span class="label">查询年份&nbsp;&nbsp;
            <el-date-picker
              :clearable="false"
              v-model="year"
              type="year"
              placeholder="请选择要查询的年份"
              width="230"
              @change="handleChangeYear"
            />
          </span>
        </div>

js部分

data() {
    return {
      orgName: '',
      compName: '',
      compList: [],
      centerList: []
    };
  },
  computed: {
    year: {
      get() {
        return this.$store.state.user.year;
      },
      set(year) {
        const _year = this.$moment(year).format('YYYY');
        this.$store.commit('user/SET_YEAR', _year);
      }
    }
  },
  mounted() {
    this.authorityHandle();
  },
  methods: {
    handleChangeYear(value) {
      this.$store.commit('user/SET_YEAR', value);
      // const year = this.$moment(value).format('YYYY');
      // this.year = year.toString();
    }
 }

总结：给属性添加set方法以后，可以直接被双向绑定的。

没尝试过handleChangeYear是否还需要设置，目测应该没用了，有了解的兄弟姐妹们，麻烦告诉一下。