vuex中从接口获取数据,并渲染到页面
在vue中,有时候要使用vuex来处理项目中的一些接口问题,于是简单测试了一下,以下是我的方法,如有错误,请指出。
1.首先,新建一个文件夹,如图,在新建一个index.js文件,内容填写在里面,因为我的项目并不完整,所以使用的vuex属性并不多。
2.在vue官网中引入vuex,这里我使用的是npm安装,npm安装需要在index.js写入以下的代码。
3.导入封装好的api接口函数,这里的接口封装我就不详细讲解,因为我需要引入三个接口,所以就在index.js引入了三个,需要注意的是,接口名一定要和你封装调用的接口名一致。
这是getapi.js文件
4.实例化vuex配置对象,并导出
export default new Vuex.Store({
})
5.state封装状态,在store文件夹下新建一个state.js,初始化数据
6.vuex中为了代码看起来简洁清晰,常常使用常量替代Mutation事件类型。新建mutation-type.js,自定义常量名。
7.mutations更改状态的逻辑,同步操作。在store文件夹下新建一个mutations.js
8.actions – 提交mutation,异步操作,因为我接口中需要经纬度数据,所以我在这里直接将经纬度写死,测试一下。
9.在index.js导入state,mutations,mutation-type文件
10.在index.js配置对象里引入state,mutations
11.在App.vue里调用
12.在需要渲染的页面导入辅助函数
13.测试有没有拿到数据
如果拿到数据,可以通过v-for循环遍历数组,精确拿到你想要的数据。