Vue / Vuex动态组件未更改 CodeSandbox：

如何解决Vue / Vuex动态组件未更改 CodeSandbox：

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

{
  "1":{
    "id":1,"title":"Default title","nodes":[],"type":"Block"
  },"2":{
    "id":2,"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。我如何进行此更新？

如果我随后将另一个节点推入阵列，它将立即更新。

---

CodeSandBox：

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

解决方法

问题是您的吸气剂将不起作用，因为它不纯：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>