vuex中怎样使用this.$set更新对象?

mutations是在一个独立的js文件里面 直接使用this.$set更新state对象数据会报错this.$set is not a function 这种情况怎么办呢?

state里面的数据

articleList: [
    {
      userinfo: {image: 'static/img/3.jpeg', nickname: 'eee', text: '嘿嘿', time: '十天前'},
      content: {href: '2222222', text: 'test', create_time: '', updata_time: ''},
      pic: [{path: 'static/img/0.jpg'}, {path: 'static/img/0.jpg'}, {path: 'static/img/0.jpg'}],
      likebar: {hot: 555, status: false, comments: 666},
      isFollow: true
    }
  ]

组件中触发action
this.$store.dispatch('getLists')

action.js

getLists (val) {
    api.articleList().then((res) => {
      val.commit('updateList', res)
    })
}

mutations.js

updateList (state, data) {
    this.$set(this.state.articleList, 0, data)  //这样写不对
    this.state.articleList = data //这样写视图不更新
}
阅读 19.1k
4 个回答

mutations.js

updateList (state, data) {
    state.articleList = data
}

action.js

getLists ({commit, state}) {
    let articleList = JSON.parse(JSON.stringify(state.articleList))
    api.articleList().then((res) => {
      articleList[0] = res
      commit('updateList', articleList)
    })
}

使用

import { mapActions} from 'vuex'


methods: {
    ...mapActions(['getLists']),
    //触发myUpdate方法,执行action中的getLists
    myUpdate(){
        this.getLists()
    }
}

图片补充
图片描述

import Vue from 'vue';
// ...
updateList (state, data) {
    Vue.set(state.articleList, 0, data);
}

直接使用Vue的静态方法set()设置属性以触发更新

不应该是这样的吗?

updateList (state, data) {
    // this.$set(this.state.articleList, 0, data)
    state.articleList[0] = data
}

用最简单也是最暴力的方法:

updateList (state, data) {
    state.articleList[0] = data;
    state.articleList = JSON.parse(JSON.stringify(state.articleList));
}

不管是数组还是对象,都适用

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题