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

当我使用TaskForm添加数据时，我必须重新加载页面以查看由

CardComponent

维护的效果。我希望立即看到最近添加的数据。实现这一结果的最佳方式是什么

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

任务形式：

卡片组件：

---

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

这是一个典型的状态管理用例，它是一个集中的单例，跨多个组件提供反应状态

文件中的两个要点是：

• Vuex商店是被动的。当Vue组件从中检索状态时，如果存储的状态发生更改，它们将响应并高效地更新

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

此示例显示如何提交突变并观察组件中的状态更改：

Vue.use（Vuex）
常量baseComponent={
道具：[“资源”]，
数据：（）=>({
加载：错误
}),
计算：{
标题（）{
返回this.resource.charAt（0.toUpperCase（）+this.resource.slice（1）+“Component”
},
btnText（）{
返回this.loading？`Fetching${this.resource}…`:`Fetch${this.resource}`
}
},
方法：{
异步获取资源（）{
this.loading=！this.loading
const resources=等待获取(`https://jsonplaceholder.typicode.com/${this.resource}`）
.then（response=>response.json（））
.然后（资源=>resources）
this.$store.commit（`set${this.resource.charAt（0.toUpperCase（）+this.resource.slice（1）}`，参考资料）
this.loading=！this.loading
}
},
模板：`
{{title}}
{{btnText}}
帖子总数：{{$store.getters['getPosts'].length}

TODO总数：{{$store.getters['getTodos'].length}

`
}
Vue.component（'component-a'，baseComponent）
Vue.component（'component-b'，baseComponent）
const store=新的Vuex.store({
声明：{
员额：[]，
待办事项：[]
},
吸气剂：{
getPosts：（state）=>state.posts，
getTodos：（state）=>state.todos，
},
突变：{
设置帖子：（状态，帖子）=>{
state.posts=posts
},
setTodos：（状态，todos）=>{
state.todos=todos
}
}
})
新Vue({
el:“#应用程序”，
商店
})

#应用程序{
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
}

---

这是一个典型的状态管理用例，它是一个集中的单例，跨多个组件提供反应状态

文件中的两个要点是：

• Vuex商店是被动的。当Vue组件从中检索状态时，如果存储的状态发生更改，它们将响应并高效地更新

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

此示例显示如何提交突变并观察组件中的状态更改：

Vue.use（Vuex）
常量baseComponent={
道具：[“资源”]，
数据：（）=>({
加载：错误
}),
计算：{
标题（）{
返回this.resource.charAt（0.toUpperCase（）+this.resource.slice（1）+“Component”
},
btnText（）{
返回this.loading？`Fetching${this.resource}…`:`Fetch${this.resource}`
}
},
方法：{
异步获取资源（）{
this.loading=！this.loading
const resources=等待获取(`https://jsonplaceholder.typicode.com/${this.resource}`）
.then（response=>response.json（））
.然后（资源=>resources）
this.$store.commit（`set${this.resource.charAt（0.toUpperCase（）+this.resource.slice（1）}`，参考资料）
this.loading=！this.loading
}
},
模板：`
{{title}}
{{btnText}}
帖子总数：{{$store.getters['getPosts'].length}

TODO总数：{{$store.getters['getTodos'].length}

`
}
Vue.component（'component-a'，baseComponent）
Vue.component（'component-b'，baseComponent）
const store=新的Vuex.store({
声明：{
员额：[]，
待办事项：[]
},
吸气剂：{
getPosts：（state）=>state.posts，
getTodos：（state）=>state.todos，
},
突变：{
设置帖子：（状态，帖子）=>{
state.posts=posts
},
setTodos：（状态，todos）=>{
state.todos=todos
}
}
})
新Vue({
el:“#应用程序”，
商店
})

#应用程序{
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
}

---

我决定使用总线，因为我的项目不大。现在看起来是这样的：

任务形式：

methods:{

            addTask() {
                EventBus.$emit('taskCreated',{title:this.title, second_title:this.second_title});
                axios.post('./api/word', {
                    title:this.title,
                    second_title:this.second_title
                     })

                 }

卡片组件：

created(){

          axios.get('./api/word')
                .then(response => this.words = response.data);        


          EventBus.$on('taskCreated', (title,second_title) => {

              this.words.push(title);

              this.words.push(second_title);           


              axios.get('./api/word')
                .then(response => this.words = response.data);


          });

---

我的问题是CardComponent中的代码重复。如果created（）中不存在带有axios的代码，则不会生成任何内容。如果我在EventBus部分使用此代码，我将看不到自动更新。但是当我使用这段代码时，有时没有可见的更新，有时不是添加一个任务，而是出现两个或三个任务（当然它们是相同的）。有什么办法解决我的问题吗？

我决定使用总线，因为我的项目不大。现在看起来是这样的：

任务形式：

methods:{

            addTask() {
                EventBus.$emit('taskCreated',{title:this.title, second_title:this.second_title});
                axios.post('./api/word', {
                    title:this.title,
                    second_title:this.second_title
                     })

                 }

卡片组件：

created(){

          axios.get('./api/word')
                .then(response => this.words = response.data);        


          EventBus.$on('taskCreated', (title,second_title) => {

              this.words.push(title);

              this.words.push(second_title);           


              axios.get('./api/word')
                .then(response => this.words = response.data);


          });

我的问题是CardComponent中的代码重复。如果created（）中不存在带有axios的代码，则不会生成任何内容。如果我在EventBus部分使用此代码，我将看不到自动更新。但是当我使用这段代码时，有时没有可见的更新，有时不是添加一个任务，而是出现两个或三个任务（当然它们是相同的）。任何w