Question

这是组件的简化逻辑，该组件从Vuex存储请求数据并将其呈现到页面。

问题： 我相信我可能在理解反应性如何工作方面缺少点知识，如果有人可以弄清楚为什么在两种情况下渲染表现不同，我将不胜感激。

方案1（按预期运行）
1.外部逻辑调度updateBalance 2.余额属性值更改 3.组件响应更改并呈现更新的值

方案2（未按预期工作¯_（ツ）_ /¯）
1.外部逻辑调度createBalance 2.余额属性被完全重写 3.组件响应更改（调试器触发器，全新的对象可以是观察者） 4.组件不在页面上显示更新的值

Vuex突变：

createBalance(state) {
  state.balance = { 
    someSection: { value: 0 },
    someSection2: { value: 3 }
    ...
  }
},
updateBalance(state) {
  state.balance.someSection = { value: 1 }
}

Vuex吸气剂：

getBalance(state) {
  return state.balance
}

Vue组件JS：

export default {
  name: `ComponentName`,
  computed: {
    sections() {
      const balance = this.$store.getters[`helper/getBalance`] 

      return balance
    }
  }
}

Vue组件模板：

<template>
  <div class='balance section__container'>
    <div v-for='(section, sectionName) in balance'>{{ section.value }}</div>
  </div>
</template>

<script src='./componentName.entry.js'></script>

P.S：我已经尽力简单地描述了这个问题，但是如果缺少一些可能影响行为的重要信息，请告诉我，我将更新问题

更新 Vuex动作：由于实际上平衡对象包含60多种可以通过各种方式修改的属性，因此为了快速重置，我决定只用其初始状态覆盖它。

removeAllProducts({ commit }) {
  ...
  commit(`createBalance`)
}

Vuex更改数据对象后组件未更新

0 个答案: