Question

您好我尝试创建一个表来跟踪多个项目的验证状态。

vue xstore：

  mutations: {
...,
    set_scaninfos: function (state, scaninfos) {
      Vue.set(state, 'scaninfos', scaninfos)
    }
  },
  actions: {
...,
    setScanInfo (store, scinfo) {
      store.commit('set_scaninfos', scinfo)
    }
  },

组件 - 首先我在vuex商店中初始化scaninfos：

 initScanInfos () {
   var scanIds = this.$store.state.scanids
   console.log(this.$store.state.scanids.length)
   for (var i = 0; i < scanIds.length; i++) {
     this.scaninfos[scanIds[i]] = Object.assign({}, this.ruleForm)
   }
   this.$store.dispatch(‘setScanInfo’, this.scaninfos)
 }

}，

当更新到达时，我会像这样推送它们：

  saveForm (formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        console.log('form valid!')
        this.ruleForm.validated = true
        var scanId = this.$store.state.scanids[this.scanindex]
        this.scaninfos[scanId] = Object.assign({}, this.ruleForm)
        this.$store.dispatch('setScanInfo', this.scaninfos)
        this.saveSuccess()
      } else {
        console.log('error: form invalid!!')
        this.ruleForm.validated = false
        this.saveFail()
        return false
      }
    })
  },

我提供的数据如下：

computed: {
  scanId () {
    var pId = this.$store.state.scanids[this.scanindex]
    return pId
  },
  scinfo () {
    var scinfo = this.$store.state.scaninfos
    return scinfo
  }

HTML：

    <table class="scantable">
        <tr>
            <th>scan</th>
            <th>validation</th>
        </tr>
        <tr v-for="scanid in $store.state.scanids">
            <td>{{ scanid }}</td>
            <td>
                <i v-show="!scinfo[scanid].validated" class="el-icon-close"></i>
                <i v-show="scinfo[scanid].validated" class="el-icon-check"></i>
            </td>
        </tr>
    </table>

数据以正确的格式到达商店。但是，当vuex存储更改时，视图不会刷新。我怎样才能解决这个问题？我做错了什么？

PS：

我的数据是一个非常难看的嵌套JSON字典：

{ "Ex1": { "pseudonym": "asd", "yob": "2009-12-31T23:00:00.000Z", "scanmonth": "2018-01-31T23:00:00.000Z", "gender": "male", "therapy": "sda", "doa": "alive", "diagnosis": "shanghai", "mgmt": "unmethylated", "validated": true, "survival": 1, "karnofsky": 10, "ki67": 1 }, "Ex2": { "pseudonym": "asdsad", "yob": "2010-12-31T23:00:00.000Z", "scanmonth": "2018-02-28T23:00:00.000Z", "gender": "male", "therapy": "asd", "doa": "alive", "diagnosis": "shanghai", "mgmt": "unmethylated", "validated": true, "survival": 1, "karnofsky": 10, "ki67": 1 } }

Answer 1

我通过添加

解决了这个问题

this.$forceUpdate()

到我的保存功能，但这似乎是一个非常难看的黑客。

在Vuex存储中更改数据后，vue.js 2视图未刷新

1 个答案: