前端基础学习-当双向绑定遇到vuex

最新推荐文章于 2023-03-31 14:53:30 发布

小夭。

最新推荐文章于 2023-03-31 14:53:30 发布

阅读量325

点赞数

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

本文链接：https://blog.csdn.net/m0_47146037/article/details/112305845

版权

前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

在开发过程中遇到需要用vuex修改v-model的值，如果只是平常使用则会报错
在这里插入图片描述
computed property “activeName” was assigned to but it has no setter
这时我们需要给双向绑定的值添加一个set

  computed: {
    ...mapState('admin/tabComponent', ['activeName']),
    // 这里activeName是双向绑定，要添加set
    activeName: {
      get: function () {
        return this.$store.state.admin.tabComponent.activeName
      },
      set: function (val) {
        this.setActiveName(val)
      }
    }
  },

mapState和mapMutations（备注说明）

export default {
  namespaced: true,
  state: {
    activeName: 'No1' // tab切换的activeName
  },
  actions: {
  },
  mutations: {
    /**
      * @description 设置tab当前选中
      * @param {Object} state state
      * @param {Object} data data
      */
    setActiveName (state, data) {
      state.activeName = data
    }
  }
}