发表于: 2020-02-13 22:06:33
1 1264
今天完成的事情
今天主要是做了数据展示的部分,因为涉及到的内容需要点击article列表这个按钮后发送请求,所以还需要完成的步骤是要在两个组件之间把相应的值要传递过去。这里用到的一个知识点是涉及非父子组件之间的传值问题,可以用到两个方法,一种是使用bus总线一个发送一个接受。
亦可利用vuex这个功能,进行传值
vuex传值
vuex主要用于管理vue中的数据,但是网上说最好大型项目用,其他的一些中小型或者小型的项目能别用尽量别用(现在还不太理解),vuex中主要包含四类:state、getter、mutations、actions,之间的关系如下图:
从上图可以很清晰的看到每个状态之间的触发的方法,其中,state主要用于管理项目的数据(进行数据初始化);getters就要读取state中的数据,相当于computed当数据进行更新时读取数据;mutations主要用于操作state中的数据,说白了就是对state数据进行更改;action 提交的是 mutation,而不是直接变更状态,(dispatch)触发,(参数需要context)。
理解了这个图,才能真正的明白各个之间的到底负责什么样的操作。这篇文章主要说兄弟组件之间的传值吧,写一个简单的例子(我在学vuex的时候看的例子)
上图是我的项目目录结构,主要用到child.vue和helloworld.vue这两个组件,在src文件夹下创建store目录,再创建一个index.js文件。
child.vue组件
helloworld.vue组件
store/index.js
上面就是一个最基本的例子,运行后,打开页面会在显示两个组件中获取到的state值,当在helloworld.vue组件的input输入框中输入内容时,会同时改变两个组件的显示,相当于在helloworld.vue组件中改变信息,child.vue组件中会接收到信息,并发生改变。
还有一个想法是直接可以把这个调用axios数据的内容直接写在生命周期函数中,那么便可以直接调用其中的各个数据内容了。
明天要完成的事情
明天进一步要完成这个页面的展示内容
评论