javascript - 当我在另一个组件中添加数据时，我必须更新另一个组件

Question

当我使用 TaskForm 添加数据时，我必须重新加载页面才能看到由 CardComponent 维护的效果。我想立即查看最近添加的数据。实现这一结果的最佳方法是什么？

我必须发布我的两个组件的代码，所以我使用 Pastebin

任务表单:https://pastebin.com/HVjwkAKd

卡片组件:https://pastebin.com/PM00TzRq

我不擅长使用Vue，这就是我寻求帮助的原因。谢谢!

Answer 1

这是状态管理的典型用例 Vuex ，一个集中式单例，提供跨多个组件的 react 状态。

文档中的两个要点是:

• Vuex 存储是响应式的。当 Vue 组件从中检索状态时，如果存储的状态发生变化，它们将使用react且高效地更新。

• 您无法直接改变商店的状态。更改存储状态的唯一方法是显式提交突变。这确保了每次状态更改都会留下可跟踪的记录，并启用有助于我们更好地了解应用程序的工具。

此示例展示了如何提交突变并观察组件中的状态变化:

Vue.use(Vuex)

const baseComponent = {
  props: ['resource'],
  data: () => ({
    loading: false
  }),
  computed: {
    title () {
      return this.resource.charAt(0).toUpperCase() + this.resource.slice(1) + ' Component'
    },
    btnText () {
      return this.loading ? `Fetching ${this.resource}...` : `Fetch ${this.resource}`
    }
  },
  methods: {
    async fetchResource() {
      this.loading = !this.loading

      const resources = await fetch(`https://jsonplaceholder.typicode.com/${this.resource}`)
        .then(response => response.json())
        .then(resources => resources)

      this.$store.commit(`set${this.resource.charAt(0).toUpperCase() + this.resource.slice(1)}`, resources)

      this.loading = !this.loading
    }
  },
  template: `<div>
  <h1>{{ title }}</h1>
  <button @click="fetchResource" :disabled="loading">{{ btnText }}</button>
  <p>Total Posts: {{ $store.getters['getPosts'].length }}</p>
  <p>Total Todos: {{ $store.getters['getTodos'].length }}</p>
  </div>`
}

Vue.component('component-a', baseComponent)
Vue.component('component-b', baseComponent)

const store = new Vuex.Store({
  state: {
    posts: [],
    todos: []
  },
  getters: {
    getPosts: (state) => state.posts,
    getTodos: (state) => state.todos,
  },
  mutations: {
    setPosts: (state, posts) => {
      state.posts = posts
    },
    setTodos: (state, todos) => {
      state.todos = todos
    }
  }
})

new Vue({
  el: '#app',
  store
})

#app {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <component-a resource="posts"></component-a>
  <component-b resource="todos"></component-b>
</div>