Vue/Vuex 动态组件不变答案

【问题标题】：Vue/Vuex dynamic component not changingVue/Vuex 动态组件不变
【发布时间】：2020-12-07 09:56:45
【问题描述】：

我有一个“节点”的 vuex 存储。每个都有Accordion 或Block 的类型。

{
  "1":{
    "id":1,
    "title":"Default title",
    "nodes":[],
    "type":"Block"
  },
  "2":{
    "id":2,
    "title":"Default title",
    "nodes":[],
    "type":"Accordion"
  }
}

当我使用type 创建动态组件时，它的效果很好：

<ul>
  <li v-for="(node, s) in nodes" :key="parentId + s">
    <component :is="node.type" :node="node" :parent-id="parentId"></component>
  </li>
</ul>

但是当我改变它时，视图层没有任何反应：

convert(state, { to, id }) {
  state.nodes[id].type = to;
  Vue.set(state.nodes[id], "type", to);
},

我什至使用Vue.set。如何进行此更新？

如果我将另一个节点推入数组，它会立即更新。

代码沙盒：

https://codesandbox.io/s/romantic-darwin-dodr2?file=/src/App.vue

【问题讨论】：

标签： vue.js vuex vue-reactivity

【解决方案1】：

问题是你的吸气剂不起作用，因为它不纯：Issue。但是您可以在您的状态上使用深度观察器：

<template>
  <div class="home">
    <h1>Home</h1>
    <Sections :sections="nodesArr" :parent-id="null"/>
  </div>
</template>

<script>
// @ is an alias to /src
import Sections from "@/components/Sections.vue";
import { mapState } from "vuex";

export default {
  name: "home",
  components: {
    Sections
  },
  data: () => {
    return {
      nodesArr: []
    };
  },
  computed: {
    ...mapState(["nodes", "root"])
  },
  watch: {
    root: {
      handler() {
        this.updateArr();
      },
      deep: true
    }
  },
  mounted() {
    this.updateArr();
  },
  methods: {
    updateArr() {
      this.nodesArr = this.root.map(ref => this.nodes[ref]);
    }
  }
};
</script>

【讨论】：