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

Question

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 //这样写视图不更新
}

Answer 1

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()
    }
}

图片补充

Answer 2

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

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

Answer 3

不应该是这样的吗？

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

Answer 4

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

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

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